@appartmint/css-mint 0.0.25 → 0.0.27

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/ui/button.scss +1 -1
  3. package/src/components/widget/card.scss +22 -19
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.25",
4
+ "version": "0.0.27",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "description": "Styles by App Art Mint",
package/src/components/ui/button.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  @include css-var-ref(btn-br, br);
14
14
  @include css-var-ref(btn-bw, bw);
15
15
  @include css-var-ref(btn-bc, brand-4);
16
- @include css-var-ref(btn-fg, fg);
16
+ @include css-var-ref(btn-fg, c-fg);
17
17
  @include css-var-ref(btn-fg-hover, back);
18
18
  @include css-var-ref(btn-fg-alt, btn-bc);
19
19
  @include css-var-ref(btn-fg-alt-hover, btn-fg-hover);
package/src/components/widget/card.scss CHANGED
@@ -9,9 +9,12 @@
9
9
  @use '../../util' as *;
10
10
 
11
11
  :root {
12
+ @include css-var-ref(card-p, calc(css-var(gap) * 8));
12
13
  @include css-var-ref(card-r, br);
13
14
  @include css-var-ref(card-shadow-s, shadow-s);
14
15
  @include css-var-ref(card-shadow-c, shadow-c);
16
+ @include css-var-ref(card-bg, c-bg);
17
+ @include css-var-ref(card-logo-s, 4rem);
15
18
  }
16
19
 
17
20
  /// Card Styles
@@ -95,10 +98,10 @@
95
98
  overflow: visible;
96
99
 
97
100
  & > #{class(image)} {
98
- width: calc(50% + css-var(card-padding));
101
+ width: calc(50% + css-var(card-p));
99
102
  height: fit-content;
100
- margin-right: calc(css-var(card-padding) * -2);
101
- border-radius: css-var(card-radius);
103
+ margin-right: calc(css-var(card-p) * -2);
104
+ border-radius: css-var(card-r);
102
105
 
103
106
  img {
104
107
  height: 100%;
@@ -108,10 +111,10 @@
108
111
 
109
112
  & > #{class(content)} {
110
113
  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);
114
+ width: calc(50% + css-var(card-p));
115
+ margin-top: calc(2 * css-var(card-p));
116
+ border-radius: css-var(card-r);
117
+ box-shadow: css-var(card-shadow-s) css-var(card-shadow-c);
115
118
  }
116
119
  }
117
120
 
@@ -121,7 +124,7 @@
121
124
 
122
125
  & > #{class(image)} {
123
126
  margin-right: 0;
124
- margin-left: calc(css-var(card-padding) * -2);
127
+ margin-left: calc(css-var(card-p) * -2);
125
128
  }
126
129
  }
127
130
  }
@@ -150,8 +153,8 @@
150
153
  flex-direction: column;
151
154
  gap: calc(css-var(gap) * 2);
152
155
  position: relative;
153
- padding: css-var(card-padding);
154
- background: css-var(card-back);
156
+ padding: css-var(card-p);
157
+ background: css-var(card-bg);
155
158
  width: 100%;
156
159
  overflow: hidden;
157
160
 
@@ -166,7 +169,7 @@
166
169
  flex-direction: column;
167
170
  align-items: center;
168
171
  height: fit-content;
169
- gap: css-var(card-padding);
172
+ gap: css-var(card-p);
170
173
  text-align: center;
171
174
  width: 100%;
172
175
 
@@ -182,12 +185,12 @@
182
185
  & > #{class(image)} {
183
186
  width: 100%;
184
187
  height: 100%;
185
- max-width: css-var(card-logo-size);
186
- max-height: css-var(card-logo-size);
188
+ max-width: css-var(card-logo-s);
189
+ max-height: css-var(card-logo-s);
187
190
 
188
191
  &#{class(large)} {
189
- max-width: calc(2 * css-var(card-logo-size));
190
- max-height: calc(2 * css-var(card-logo-size));
192
+ max-width: calc(2 * css-var(card-logo-s));
193
+ max-height: calc(2 * css-var(card-logo-s));
191
194
  }
192
195
 
193
196
  img {
@@ -202,10 +205,10 @@
202
205
  display: flex;
203
206
  align-items: center;
204
207
  justify-content: center;
205
- min-width: css-var(card-logo-size);
206
- max-width: css-var(card-logo-size);
208
+ min-width: css-var(card-logo-s);
209
+ max-width: css-var(card-logo-s);
207
210
  margin: 0;
208
- font-size: calc(css-var(card-logo-size) - 1rem);
211
+ font-size: calc(css-var(card-logo-s) - 1rem);
209
212
  }
210
213
 
211
214
  & > div {
@@ -227,7 +230,7 @@
227
230
 
228
231
  &-grid {
229
232
  position: relative;
230
- background: css-var(card-back);
233
+ background: css-var(card-bg);
231
234
 
232
235
  &:has(#{class(image)}) {
233
236
  #{class(content)} {