@appartmint/mint 0.10.2 → 0.10.3

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 +144 -26
  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/dist/js/imports/models/item.d.ts +2 -0
  6. package/dist/js/imports/models/item.d.ts.map +1 -1
  7. package/dist/js/imports/util/icon.d.ts.map +1 -1
  8. package/dist/js/index.js +7 -0
  9. package/dist/js/index.js.map +1 -1
  10. package/dist/js/index.min.js +1 -1
  11. package/dist/js/index.min.js.map +1 -1
  12. package/package.json +1 -1
  13. package/src/scss/imports/components/_buttons.scss +42 -14
  14. package/src/scss/imports/components/_cards.scss +142 -141
  15. package/src/scss/imports/components/_image.scss +3 -7
  16. package/src/scss/imports/global/_animations.scss +0 -33
  17. package/src/scss/imports/global/_themes.scss +56 -9
  18. package/src/scss/imports/util/_util.scss +475 -362
  19. package/src/scss/imports/util/_vars.scss +8 -2
package/src/scss/imports/components/_cards.scss CHANGED
@@ -1,152 +1,153 @@
1
1
  /// cards.scss - Card styles
2
2
  /// @author App Art Mint LLC
3
- ///
3
+ ///
4
4
  /// @group Cards
5
5
  @charset 'utf-8';
6
6
 
7
7
  /// Imports
8
8
  @use '../util' as *;
9
9
 
10
- /// Variables
11
- $card-shadow: $card-shadow-size #{css-var($card-shadow-color)};
12
-
13
10
  /// Card Styles
14
11
  #{class(card)} {
15
- display: flex;
16
- flex-direction: column;
17
- height: 100%;
18
- margin: 0;
19
- border-radius: $card-radius;
20
- box-shadow: $card-shadow;
21
- overflow: hidden;
22
-
23
- @include break(sm) {
24
- flex-direction: row;
25
-
26
- &#{class(reverse)} {
27
- flex-direction: row-reverse;
28
- }
29
- }
30
-
31
- &#{class(stagger)} {
32
- position: relative;
33
-
34
- @include break(sm) {
35
- flex-direction: row-reverse;
36
- border-radius: 0;
37
- box-shadow: none;
38
- overflow: visible;
39
-
40
- & > #{class(image)},
41
- & > mint-image #{class(image)} {
42
- position: absolute;
43
- top: 0;
44
- left: 0;
45
- width: 50%;
46
- height: calc(100% - 3rem);
47
- border-radius: $card-radius;
48
- box-shadow: $card-shadow;
49
-
50
- img {
51
- height: 100%;
52
- object-fit: cover;
53
- }
54
- }
55
-
56
- & > #{class(content)} {
57
- width: calc(50% + $card-padding * 2);
58
- margin-top: $card-padding * 2;
59
- border-radius: $card-radius;
60
- box-shadow: $card-shadow;
61
- }
62
- }
63
-
64
- &#{class(reverse)} {
65
- @include break(sm) {
66
- flex-direction: row;
67
-
68
- & > #{class(image)},
69
- & > mint-image #{class(image)} {
70
- left: auto;
71
- right: 0;
72
- }
73
- }
74
- }
75
- }
76
-
77
- & > #{class(image)}:only-child,
78
- & > mint-image:only-child #{class(image)} {
79
- width: 100%;
80
- }
81
-
82
- & > #{class(image)},
83
- & > mint-image #{class(image)} {
84
- overflow: hidden;
85
-
86
- @include break(sm) {
87
- width: 50%;
88
- }
89
-
90
- & + #{class(content)} {
91
- @include break(sm) {
92
- width: 50%;
93
- }
94
- }
95
- }
96
-
97
- #{class(content)} {
98
- display: grid;
99
- gap: $grid-gap / 2;
100
- padding: $card-padding;
101
- background: css-var(black-2);
102
- width: 100%;
103
-
104
- & > :first-child {
105
- margin-top: 0;
106
- }
107
-
108
- & > :last-child {
109
- margin-bottom: 0;
110
- }
111
- }
112
-
113
- #{class(title)} {
114
- display: flex;
115
- align-items: center;
116
- justify-content: flex-start;
117
- height: 100%;
118
-
119
- & > #{class(image)},
120
- & > mint-image {
121
- width: 100%;
122
- height: 100%;
123
- max-width: $card-logo-size;
124
- max-height: $card-logo-size;
125
- margin-right: $card-padding;
126
-
127
- img {
128
- display: block;
129
- width: 100%;
130
- height: 100%;
131
- }
132
- }
133
-
134
- i {
135
- display: flex;
136
- align-items: center;
137
- justify-content: center;
138
- min-width: $card-logo-size;
139
- max-width: $card-logo-size;
140
- margin-right: $card-padding;
141
- font-size: calc($card-logo-size - 1rem);
142
- }
143
-
144
- & > div {
145
- width: 100%;
146
-
147
- & > * {
148
- margin: 0;
149
- }
150
- }
151
- }
12
+ display: flex;
13
+ flex-direction: column;
14
+ height: 100%;
15
+ margin: 0;
16
+ border-radius: $card-radius;
17
+ box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
18
+ overflow: hidden;
19
+
20
+ @include break(sm) {
21
+ flex-direction: row;
22
+
23
+ &#{class(reverse)} {
24
+ flex-direction: row-reverse;
25
+ }
26
+ }
27
+
28
+ &#{class(stagger)} {
29
+ position: relative;
30
+
31
+ @include break(sm) {
32
+ flex-direction: row-reverse;
33
+ border-radius: 0;
34
+ box-shadow: none;
35
+ overflow: visible;
36
+
37
+ &>#{class(image)},
38
+ &>mint-image #{class(image)} {
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ width: 50%;
43
+ height: calc(100% - 3rem);
44
+ border-radius: $card-radius;
45
+ box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
46
+
47
+ img {
48
+ height: 100%;
49
+ object-fit: cover;
50
+ }
51
+ }
52
+
53
+ &>#{class(content)} {
54
+ width: calc(50% + $card-padding * 2);
55
+ margin-top: $card-padding * 2;
56
+ border-radius: $card-radius;
57
+ box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
58
+ }
59
+ }
60
+
61
+ &#{class(reverse)} {
62
+ @include break(sm) {
63
+ flex-direction: row;
64
+
65
+ &>#{class(image)},
66
+ &>mint-image #{class(image)} {
67
+ left: auto;
68
+ right: 0;
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ &>#{class(image)}:only-child,
75
+ &>mint-image:only-child #{class(image)} {
76
+ width: 100%;
77
+ }
78
+
79
+ &>#{class(image)},
80
+ &>mint-image #{class(image)} {
81
+ overflow: hidden;
82
+
83
+ @include break(sm) {
84
+ width: 50%;
85
+ }
86
+
87
+ &+#{class(content)} {
88
+ @include break(sm) {
89
+ width: 50%;
90
+ }
91
+ }
92
+ }
93
+
94
+ #{class(content)} {
95
+ display: grid;
96
+ gap: $grid-gap / 2;
97
+ padding: $card-padding;
98
+ background: css-var(black-2);
99
+ width: 100%;
100
+
101
+ &> :first-child {
102
+ margin-top: 0;
103
+ }
104
+
105
+ &> :last-child {
106
+ margin-bottom: 0;
107
+ }
108
+ }
109
+
110
+ #{class(title)} {
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: flex-start;
114
+ height: fit-content;
115
+
116
+ &:only-child {
117
+ height: 100%;
118
+ }
119
+
120
+ &>#{class(image)},
121
+ &>mint-image {
122
+ width: 100%;
123
+ height: 100%;
124
+ max-width: $card-logo-size;
125
+ max-height: $card-logo-size;
126
+ margin-right: $card-padding;
127
+
128
+ img {
129
+ display: block;
130
+ width: 100%;
131
+ height: 100%;
132
+ }
133
+ }
134
+
135
+ i {
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ min-width: $card-logo-size;
140
+ max-width: $card-logo-size;
141
+ margin-right: $card-padding;
142
+ font-size: calc($card-logo-size - 1rem);
143
+ }
144
+
145
+ &>div {
146
+ width: 100%;
147
+
148
+ &>* {
149
+ margin: 0;
150
+ }
151
+ }
152
+ }
152
153
  }
package/src/scss/imports/components/_image.scss CHANGED
@@ -7,10 +7,6 @@
7
7
  /// Imports
8
8
  @use '../util' as *;
9
9
 
10
- /// Variables
11
- $shadow-color: rgba(0, 0, 0, 0.4);
12
- $shadow-size: 0.5rem;
13
-
14
10
  /// Image styles
15
11
  #{class(image)} {
16
12
  &#{class(error)} {
@@ -20,9 +16,9 @@ $shadow-size: 0.5rem;
20
16
  bottom: 0;
21
17
  left: 0;
22
18
  width: 100%;
23
- padding: 0 $shadow-size $shadow-size $shadow-size;
24
- background: $shadow-color;
25
- box-shadow: 0 0 $shadow-size $shadow-size $shadow-color;
19
+ padding: 0 $image-shadow-size $image-shadow-size $image-shadow-size;
20
+ background: css-var($shadow-color);
21
+ box-shadow: 0 0 $image-shadow-size $image-shadow-size css-var($shadow-color);
26
22
  text-align: center;
27
23
  }
28
24
  }
package/src/scss/imports/global/_animations.scss CHANGED
@@ -10,39 +10,6 @@
10
10
  @use 'sass:list';
11
11
  @use '../util' as *;
12
12
 
13
- /// Variables
14
- $animations: (());
15
- $transitions: (());
16
-
17
- /// Mixins
18
- /// Register an animation
19
- @mixin animation($animation) {
20
- $animations: map-merge($animations, (&: map-merge(map.get($animations, &), $animation)));
21
- $this: map.get($animations, &);
22
- $animation: '';
23
-
24
- & {
25
- @each $item in $this {
26
- @if (list.index($this, $item) != 1) {
27
- $animation: #{$animation},;
28
- }
29
- $animation: #{$animation}#{$item};
30
- }
31
- animation: $animation;
32
-
33
- @each $name, $items in $animations {
34
- &#{class($name)} {
35
- animation: $animation;
36
- }
37
- }
38
- }
39
- }
40
-
41
- /// Register a transition
42
- @mixin transition($transition) {
43
- $transitions: map-merge($transitions, ($name: $transition));
44
- }
45
-
46
13
  /// Animations
47
14
  /// Cycle through instagram colors
48
15
  @keyframes instafade {
package/src/scss/imports/global/_themes.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /// themes.scss - Styles for light and dark themes
2
2
  /// @author App/Art Mint
3
- ///
3
+ ///
4
4
  /// @group Themes
5
5
  @charset 'utf-8';
6
6
 
@@ -15,9 +15,12 @@
15
15
  @include css-var(ethereum, $ethereum);
16
16
  @include css-var(venmo, $venmo);
17
17
  @include css-var(facebook, $facebook);
18
+ @include css-var(twitter, $twitter);
18
19
  @include css-var(youtube, $youtube);
19
- @include css-var(itunes, $itunes);
20
+ @include css-var(apple, $apple);
20
21
  @include css-var(spotify, $spotify);
22
+ @include css-var(soundcloud, $soundcloud);
23
+ @include css-var(bandcamp, $bandcamp);
21
24
  @include css-var(amazon-0, $amazon-0);
22
25
  @include css-var(amazon-1, $amazon-1);
23
26
  @include css-var(napster-0, $napster-0);
@@ -81,19 +84,63 @@
81
84
  a {
82
85
  color: css-var(brand);
83
86
 
87
+ .fa-instagram {
88
+ position: relative;
89
+
90
+ &::after {
91
+ content: '\f16d';
92
+ position: absolute;
93
+ top: 0;
94
+ left: 0;
95
+ opacity: 0;
96
+ transition: opacity css-var(delay-default);
97
+
98
+ @include background-clip(css-var(instagram-0)) {
99
+ /// https://codepen.io/thomasrye/pen/VaRoYv
100
+ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
101
+ }
102
+ }
103
+ }
104
+
84
105
  @include states(hover, focus, active) {
85
106
  color: css-var(accent-0);
86
-
87
- .fa-github {
88
- color: css-var(white-1);
89
- }
90
107
 
91
- .fa-youtube {
108
+ .fa-facebook, .fa-square-facebook {
109
+ color: css-var(facebook);
110
+ }
111
+
112
+ .fa-instagram {
113
+ &::after {
114
+ opacity: 1;
115
+ }
116
+ }
117
+
118
+ .fa-twitter {
119
+ color: css-var(twitter);
120
+ }
121
+
122
+ .fa-youtube {
92
123
  color: css-var(youtube);
93
124
  }
94
125
 
95
- .fa-instagram {
96
- color: css-var(instagram-0)
126
+ .fa-spotify {
127
+ color: css-var(spotify);
128
+ }
129
+
130
+ .fa-apple {
131
+ color: css-var(apple);
132
+ }
133
+
134
+ .fa-soundcloud {
135
+ color: css-var(soundcloud);
136
+ }
137
+
138
+ .fa-bandcamp {
139
+ color: css-var(bandcamp);
140
+ }
141
+
142
+ .fa-github {
143
+ color: css-var(white-1);
97
144
  }
98
145
 
99
146
  .fa-bitcoin {