@appartmint/css-mint 0.0.26 → 0.0.28

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/src/components/widget/card.scss +22 -22
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@appartmint/css-mint",
3
3
  "author": "App Art Mint LLC",
4
- "version": "0.0.26",
4
+ "version": "0.0.28",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "description": "Styles by App Art Mint",
package/src/components/widget/card.scss CHANGED
@@ -3,18 +3,18 @@
3
3
  ///
4
4
  /// @group Widget
5
5
  @charset 'utf-8';
6
-
7
- /// Imports
8
6
  @use 'sass:math';
9
7
  @use '../../util' as *;
10
8
 
11
9
  :root {
10
+ @include css-var(card-p, calc(css-var(gap) * 8));
12
11
  @include css-var-ref(card-r, br);
13
12
  @include css-var-ref(card-shadow-s, shadow-s);
14
13
  @include css-var-ref(card-shadow-c, shadow-c);
14
+ @include css-var-ref(card-bg, c-bg);
15
+ @include css-var-ref(card-logo-s, 4rem);
15
16
  }
16
17
 
17
- /// Card Styles
18
18
  #{class(card)} {
19
19
  display: flex;
20
20
  flex-direction: column;
@@ -95,10 +95,10 @@
95
95
  overflow: visible;
96
96
 
97
97
  & > #{class(image)} {
98
- width: calc(50% + css-var(card-padding));
98
+ width: calc(50% + css-var(card-p));
99
99
  height: fit-content;
100
- margin-right: calc(css-var(card-padding) * -2);
101
- border-radius: css-var(card-radius);
100
+ margin-right: calc(css-var(card-p) * -2);
101
+ border-radius: css-var(card-r);
102
102
 
103
103
  img {
104
104
  height: 100%;
@@ -108,10 +108,10 @@
108
108
 
109
109
  & > #{class(content)} {
110
110
  height: fit-content;
111
- width: calc(50% + css-var(card-padding));
112
- margin-top: calc(2 * css-var(card-padding));
113
- border-radius: css-var(card-radius);
114
- box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
111
+ width: calc(50% + css-var(card-p));
112
+ margin-top: calc(2 * css-var(card-p));
113
+ border-radius: css-var(card-r);
114
+ box-shadow: css-var(card-shadow-s) css-var(card-shadow-c);
115
115
  }
116
116
  }
117
117
 
@@ -121,7 +121,7 @@
121
121
 
122
122
  & > #{class(image)} {
123
123
  margin-right: 0;
124
- margin-left: calc(css-var(card-padding) * -2);
124
+ margin-left: calc(css-var(card-p) * -2);
125
125
  }
126
126
  }
127
127
  }
@@ -150,8 +150,8 @@
150
150
  flex-direction: column;
151
151
  gap: calc(css-var(gap) * 2);
152
152
  position: relative;
153
- padding: css-var(card-padding);
154
- background: css-var(card-back);
153
+ padding: css-var(card-p);
154
+ background: css-var(card-bg);
155
155
  width: 100%;
156
156
  overflow: hidden;
157
157
 
@@ -166,7 +166,7 @@
166
166
  flex-direction: column;
167
167
  align-items: center;
168
168
  height: fit-content;
169
- gap: css-var(card-padding);
169
+ gap: css-var(card-p);
170
170
  text-align: center;
171
171
  width: 100%;
172
172
 
@@ -182,12 +182,12 @@
182
182
  & > #{class(image)} {
183
183
  width: 100%;
184
184
  height: 100%;
185
- max-width: css-var(card-logo-size);
186
- max-height: css-var(card-logo-size);
185
+ max-width: css-var(card-logo-s);
186
+ max-height: css-var(card-logo-s);
187
187
 
188
188
  &#{class(large)} {
189
- max-width: calc(2 * css-var(card-logo-size));
190
- max-height: calc(2 * css-var(card-logo-size));
189
+ max-width: calc(2 * css-var(card-logo-s));
190
+ max-height: calc(2 * css-var(card-logo-s));
191
191
  }
192
192
 
193
193
  img {
@@ -202,10 +202,10 @@
202
202
  display: flex;
203
203
  align-items: center;
204
204
  justify-content: center;
205
- min-width: css-var(card-logo-size);
206
- max-width: css-var(card-logo-size);
205
+ min-width: css-var(card-logo-s);
206
+ max-width: css-var(card-logo-s);
207
207
  margin: 0;
208
- font-size: calc(css-var(card-logo-size) - 1rem);
208
+ font-size: calc(css-var(card-logo-s) - 1rem);
209
209
  }
210
210
 
211
211
  & > div {
@@ -227,7 +227,7 @@
227
227
 
228
228
  &-grid {
229
229
  position: relative;
230
- background: css-var(card-back);
230
+ background: css-var(card-bg);
231
231
 
232
232
  &:has(#{class(image)}) {
233
233
  #{class(content)} {