@appartmint/mint 2.10.16 → 2.10.19

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 (19) hide show
  1. package/dist/css/mint.css +61 -23
  2. package/dist/css/mint.css.map +1 -1
  3. package/dist/css/mint.min.css +1 -1
  4. package/dist/css/mint.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/imports/components/form/_edit-info.scss +28 -0
  7. package/src/scss/imports/components/form/_index.scss +1 -0
  8. package/src/scss/imports/components/form/input/_label.scss +21 -0
  9. package/src/scss/imports/components/widget/_accordion.scss +20 -0
  10. package/src/scss/imports/components/widget/_button.scss +2 -2
  11. package/src/scss/imports/components/widget/_card.scss +24 -24
  12. package/src/scss/imports/components/widget/_image.scss +1 -1
  13. package/src/scss/imports/components/widget/_index.scss +2 -1
  14. package/src/scss/imports/components/widget/_panel.scss +1 -1
  15. package/src/scss/imports/components/widget/_table.scss +2 -2
  16. package/src/scss/imports/components/widget/_tooltip.scss +1 -1
  17. package/src/scss/imports/global/_texture.scss +1 -1
  18. package/src/scss/imports/global/_themes.scss +14 -0
  19. package/src/scss/imports/util/_vars.scss +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@appartmint/mint",
3
3
  "author": "App Art Mint LLC",
4
- "version": "2.10.16",
4
+ "version": "2.10.19",
5
5
  "license": "MIT",
6
6
  "description": "The front-end TS/SCSS framework of App Art Mint",
7
7
  "keywords": [
package/src/scss/imports/components/form/_edit-info.scss CHANGED
@@ -0,0 +1,28 @@
1
+ /// _edit-info.scss - Edit info form styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Form
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../../util' as *;
9
+
10
+ /// Edit info form styles
11
+ #{class(edit-info)} {
12
+ &:not(#{class(editing)}) {
13
+ input {
14
+ background: transparent;
15
+ border: none;
16
+ color: css-var(fore);
17
+ }
18
+ }
19
+
20
+ &-toggle {
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: flex-end;
24
+ gap: 0.5rem;
25
+ margin-bottom: 1rem;
26
+
27
+ }
28
+ }
package/src/scss/imports/components/form/_index.scss CHANGED
@@ -1,2 +1,3 @@
1
1
  @use './edit-info';
2
2
  @use './form';
3
+ @use './input';
package/src/scss/imports/components/form/input/_label.scss CHANGED
@@ -0,0 +1,21 @@
1
+ /// _label.scss - Label styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Input
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../../../util' as *;
9
+
10
+ /// Label styles
11
+ #{class(label)} {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: 0.5rem;
15
+
16
+ span {
17
+ display: flex;
18
+ align-items: center;
19
+ gap: 0.5rem;
20
+ }
21
+ }
package/src/scss/imports/components/widget/_accordion.scss ADDED
@@ -0,0 +1,20 @@
1
+ /// _accordion.scss - Accordion styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Widget
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../../util' as *;
9
+
10
+ /// Accordion styles
11
+ #{class(accordion)} {
12
+ #{class(item)} {
13
+ cursor: pointer;
14
+
15
+ #{class(wrapper)} {
16
+ transition: height 0.3s ease;
17
+ overflow: hidden;
18
+ }
19
+ }
20
+ }
package/src/scss/imports/components/widget/_button.scss CHANGED
@@ -1,7 +1,7 @@
1
- /// buttons.scss - Button styles
1
+ /// _button.scss - Button styles
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Buttons
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
package/src/scss/imports/components/widget/_card.scss CHANGED
@@ -1,7 +1,7 @@
1
- /// cards.scss - Card styles
1
+ /// _card.scss - Card styles
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Cards
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
@@ -16,8 +16,8 @@
16
16
  height: 100%;
17
17
  max-width: 100%;
18
18
  margin: 0;
19
- border-radius: $card-radius;
20
- box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
19
+ border-radius: css-var(card-radius);
20
+ box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
21
21
  overflow: hidden;
22
22
 
23
23
  @include break(sm) {
@@ -32,7 +32,7 @@
32
32
  box-shadow: none;
33
33
 
34
34
  #{class(content)} {
35
- box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
35
+ box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
36
36
  }
37
37
  }
38
38
 
@@ -91,10 +91,10 @@
91
91
  overflow: visible;
92
92
 
93
93
  & > #{class(image)} {
94
- width: calc(50% + $card-padding);
94
+ width: calc(50% + css-var(card-padding));
95
95
  height: fit-content;
96
- margin-right: $card-padding * -2;
97
- border-radius: $card-radius;
96
+ margin-right: calc(css-var(card-padding) * -2);
97
+ border-radius: css-var(card-radius);
98
98
 
99
99
  img {
100
100
  height: 100%;
@@ -103,11 +103,11 @@
103
103
  }
104
104
 
105
105
  & > #{class(content)} {
106
- width: calc(50% + $card-padding);
107
106
  height: fit-content;
108
- margin-top: $card-padding * 2;
109
- border-radius: $card-radius;
110
- box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
107
+ width: calc(50% + css-var(card-padding));
108
+ margin-top: calc(2 * css-var(card-padding));
109
+ border-radius: css-var(card-radius);
110
+ box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
111
111
  }
112
112
  }
113
113
 
@@ -117,7 +117,7 @@
117
117
 
118
118
  & > #{class(image)} {
119
119
  margin-right: 0;
120
- margin-left: $card-padding * -2;
120
+ margin-left: calc(css-var(card-padding) * -2);
121
121
  }
122
122
  }
123
123
  }
@@ -146,8 +146,8 @@
146
146
  flex-direction: column;
147
147
  gap: math.div($grid-gap, 2);
148
148
  position: relative;
149
- padding: $card-padding;
150
- background: css-var($card-bg-color);
149
+ padding: css-var(card-padding);
150
+ background: css-var(card-back);
151
151
  width: 100%;
152
152
  overflow: hidden;
153
153
 
@@ -162,7 +162,7 @@
162
162
  flex-direction: column;
163
163
  align-items: center;
164
164
  height: fit-content;
165
- gap: $card-padding;
165
+ gap: css-var(card-padding);
166
166
  text-align: center;
167
167
 
168
168
  @include break(xs) {
@@ -177,12 +177,12 @@
177
177
  & > #{class(image)} {
178
178
  width: 100%;
179
179
  height: 100%;
180
- max-width: $card-logo-size;
181
- max-height: $card-logo-size;
180
+ max-width: css-var(card-logo-size);
181
+ max-height: css-var(card-logo-size);
182
182
 
183
183
  &#{class(large)} {
184
- max-width: $card-logo-size * 2;
185
- max-height: $card-logo-size * 2;
184
+ max-width: calc(2 * css-var(card-logo-size));
185
+ max-height: calc(2 * css-var(card-logo-size));
186
186
  }
187
187
 
188
188
  img {
@@ -197,10 +197,10 @@
197
197
  display: flex;
198
198
  align-items: center;
199
199
  justify-content: center;
200
- min-width: $card-logo-size;
201
- max-width: $card-logo-size;
200
+ min-width: css-var(card-logo-size);
201
+ max-width: css-var(card-logo-size);
202
202
  margin: 0;
203
- font-size: calc($card-logo-size - 1rem);
203
+ font-size: calc(css-var(card-logo-size) - 1rem);
204
204
  }
205
205
 
206
206
  & > div {
@@ -222,7 +222,7 @@
222
222
 
223
223
  &-grid {
224
224
  position: relative;
225
- background: css-var($card-bg-color);
225
+ background: css-var(card-back);
226
226
 
227
227
  &:has(#{class(image)}) {
228
228
  #{class(content)} {
package/src/scss/imports/components/widget/_image.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /// _image.scss - Image styles
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Components
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
package/src/scss/imports/components/widget/_index.scss CHANGED
@@ -1,9 +1,10 @@
1
1
  /// _index.scss - Widgets
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Widgets
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
+ @use './accordion';
7
8
  @use './button';
8
9
  @use './card';
9
10
  @use './image';
package/src/scss/imports/components/widget/_panel.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /// _panel.scss - Panel styles
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Components
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
package/src/scss/imports/components/widget/_table.scss CHANGED
@@ -1,7 +1,7 @@
1
- /// _tables.scss - Table styles
1
+ /// _table.scss - Table styles
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Components
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
package/src/scss/imports/components/widget/_tooltip.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /// _tooltip.scss - Tooltip styles
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Widgets
4
+ /// @group Widget
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
package/src/scss/imports/global/_texture.scss CHANGED
@@ -87,7 +87,7 @@
87
87
 
88
88
  #{class(frame)} {
89
89
  height: fit-content;
90
- background-color: css-var($card-bg-color);
90
+ background-color: css-var(card-back);
91
91
 
92
92
  @extend #{class(border)};
93
93
  @if $texture-border-image {
package/src/scss/imports/global/_themes.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
8
+ @use 'sass:meta';
8
9
  @use '../util' as *;
9
10
 
10
11
  /// Global theme
@@ -52,6 +53,19 @@
52
53
  @include css-var(spacing, 0.25rem);
53
54
  @include css-var(flex-gap, calc(css-var(spacing) * 2));
54
55
 
56
+ /// Cards
57
+ @include css-var(card-padding, $card-padding);
58
+ @include css-var(card-radius, $card-radius);
59
+ @include css-var(card-shadow-color, $card-shadow-color);
60
+ @include css-var(card-shadow-size, $card-shadow-size);
61
+ @include css-var(card-logo-size, $card-logo-size);
62
+
63
+ @if (meta.type-of($card-back) == 'color') {
64
+ @include css-var(card-back, $card-back);
65
+ } @else {
66
+ @include css-var-ref(card-back, $card-back);
67
+ }
68
+
55
69
  /// Tooltips
56
70
  @include css-var-ref(tooltip-fore, fore);
57
71
  @include css-var-ref(tooltip-back, black-2);
package/src/scss/imports/util/_vars.scss CHANGED
@@ -139,7 +139,7 @@ $pill-radius: $border-radius !default;
139
139
  $pill-pad-h: 0.75rem !default;
140
140
 
141
141
  /// Cards
142
- $card-bg-color: back !default;
142
+ $card-back: back !default;
143
143
  $card-padding: 1.5rem !default;
144
144
  $card-radius: $border-radius !default;
145
145
  $card-shadow-color: $shadow-color !default;