@appartmint/mint 0.12.7 → 0.12.9

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 (8) hide show
  1. package/dist/css/mint.css +81 -27
  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/_header.scss +262 -229
  7. package/src/scss/imports/global/_global.scss +102 -77
  8. package/src/scss/imports/global/_themes.scss +75 -71
package/src/scss/imports/global/_global.scss CHANGED
@@ -3,96 +3,121 @@
3
3
 
4
4
  /// Global styles
5
5
  * {
6
- &, &::before, &::after {
7
- box-sizing: border-box;
8
- }
6
+
7
+ &,
8
+ &::before,
9
+ &::after {
10
+ box-sizing: border-box;
11
+ }
12
+ }
13
+
14
+ html,
15
+ body {
16
+ color: css-var(fore);
17
+ background-color: css-var(back);
18
+ overflow-x: hidden;
19
+ min-height: 100vh;
20
+ margin: 0;
21
+ padding: 0;
22
+ word-break: break-word;
23
+
24
+ @include break(xs) {
25
+ word-break: initial;
26
+ }
9
27
  }
10
28
 
11
- html, body {
12
- color: css-var(fore);
13
- background-color: css-var(back);
14
- overflow-x: hidden;
15
- min-height: 100vh;
16
- margin: 0;
17
- padding: 0;
18
- word-break: break-word;
19
-
20
- @include break(xs) {
21
- word-break: initial;
22
- }
29
+ body {
30
+ &#{class(fixed)} {
31
+ #{id(header)} {
32
+ position: fixed;
33
+ top: 0;
34
+ left: 0;
35
+ }
36
+
37
+ main {
38
+ min-height: 100vh;
39
+ padding-top: css-var(header-height);
40
+ }
41
+ }
23
42
  }
24
43
 
25
44
  main {
26
- display: flex;
27
- flex-direction: column;
28
- position: relative;
29
- width: 100%;
30
- min-height: calc(100vh - css-var(header-height));
31
- z-index: 1000;
32
-
33
- & > router-outlet {
34
- & + * {
35
- width: 100%;
36
- flex-grow: 1;
37
- }
38
- }
39
-
40
- router-outlet {
41
- flex-grow: 0;
42
- }
45
+ display: flex;
46
+ flex-direction: column;
47
+ position: relative;
48
+ width: 100%;
49
+ min-height: calc(100vh - css-var(header-height));
50
+ z-index: 1000;
51
+
52
+ &>router-outlet {
53
+ &+* {
54
+ width: 100%;
55
+ flex-grow: 1;
56
+ }
57
+ }
58
+
59
+ router-outlet {
60
+ flex-grow: 0;
61
+ }
43
62
  }
44
63
 
45
64
  app-root {
46
- display: block;
65
+ display: block;
47
66
  }
48
67
 
49
68
  nav {
50
- a {
51
- display: block;
52
- text-decoration: none;
53
- }
54
-
55
- ul {
56
- display: flex;
57
- margin: 0;
58
- padding: 0;
59
- list-style: none;
60
-
61
- & > li > ul {
62
- flex-direction: column;
63
- }
64
- }
69
+ a {
70
+ display: block;
71
+ text-decoration: none;
72
+ }
73
+
74
+ ul {
75
+ display: flex;
76
+ margin: 0;
77
+ padding: 0;
78
+ list-style: none;
79
+
80
+ &>li>ul {
81
+ flex-direction: column;
82
+ }
83
+ }
65
84
  }
66
85
 
67
86
  a {
68
- &[href^='mailto:'], &[href^='tel:'], &[href^='sms:'] {
69
- @include break (xs) {
70
- white-space: nowrap;
71
- }
72
- }
73
87
 
74
- i {
88
+ &[href^='mailto:'],
89
+ &[href^='tel:'],
90
+ &[href^='sms:'] {
91
+ @include break (xs) {
92
+ white-space: nowrap;
93
+ }
94
+ }
95
+
96
+ i {
75
97
  &:first-child {
76
98
  margin-right: 0.25rem;
77
99
  }
78
100
 
79
101
  &:last-child {
80
- margin-left: 0.25rem;
102
+ margin-left: 0.25rem;
81
103
  }
82
- }
104
+ }
83
105
  }
84
106
 
85
- button, a[routerLink] {
86
- cursor: pointer;
107
+ button,
108
+ a[routerLink] {
109
+ cursor: pointer;
87
110
  }
88
111
 
89
- a, button {
90
- font-size: inherit;
112
+ a,
113
+ button {
114
+ font-size: inherit;
91
115
  }
92
116
 
93
- img, video {
94
- width: 100%;
95
- height: auto;
117
+ img,
118
+ video {
119
+ width: 100%;
120
+ height: auto;
96
121
  }
97
122
 
98
123
  iframe {
@@ -100,26 +125,26 @@ iframe {
100
125
  }
101
126
 
102
127
  #{class(glow)} {
103
- box-shadow: 0 0 2rem -0.5rem css-var(glow-2);
128
+ box-shadow: 0 0 2rem -0.5rem css-var(glow-2);
104
129
  }
105
130
 
106
131
  #{class(noglow)} {
107
- box-shadow: none !important;
132
+ box-shadow: none !important;
108
133
  }
109
134
 
110
135
  #{class(sr-only)} {
111
- position: absolute !important;
112
- width: 1px !important;
113
- height: 1px !important;
114
- padding: 0 !important;
115
- margin: -1px !important;
116
- overflow: hidden !important;
117
- clip: rect(0, 0, 0, 0) !important;
118
- border: 0 !important;
136
+ position: absolute !important;
137
+ width: 1px !important;
138
+ height: 1px !important;
139
+ padding: 0 !important;
140
+ margin: -1px !important;
141
+ overflow: hidden !important;
142
+ clip: rect(0, 0, 0, 0) !important;
143
+ border: 0 !important;
119
144
  }
120
145
 
121
146
  #{class(list)} {
122
- list-style: none;
123
- margin: 0;
124
- padding: 0;
125
- }
147
+ list-style: none;
148
+ margin: 0;
149
+ padding: 0;
150
+ }
package/src/scss/imports/global/_themes.scss CHANGED
@@ -9,77 +9,79 @@
9
9
 
10
10
  /// Global theme
11
11
  :root {
12
- /// Global Colors
13
- /// Brands
14
- @include css-var(bitcoin, $bitcoin);
15
- @include css-var(ethereum, $ethereum);
16
- @include css-var(venmo, $venmo);
17
- @include css-var(facebook, $facebook);
12
+ /// Global Colors
13
+ /// Brands
14
+ @include css-var(bitcoin, $bitcoin);
15
+ @include css-var(ethereum, $ethereum);
16
+ @include css-var(venmo, $venmo);
17
+ @include css-var(facebook, $facebook);
18
18
  @include css-var(twitter, $twitter);
19
- @include css-var(youtube, $youtube);
20
- @include css-var(apple, $apple);
19
+ @include css-var(youtube, $youtube);
20
+ @include css-var(apple, $apple);
21
21
  @include css-var(apple-music, $apple-music);
22
- @include css-var(spotify, $spotify);
22
+ @include css-var(spotify, $spotify);
23
23
  @include css-var(soundcloud, $soundcloud);
24
24
  @include css-var(bandcamp, $bandcamp);
25
- @include css-var(amazon-0, $amazon-0);
26
- @include css-var(amazon-1, $amazon-1);
27
- @include css-var(napster-0, $napster-0);
28
- @include css-var(napster-1, $napster-1);
29
- @include css-var(google-play-0, $google-play-0);
30
- @include css-var(google-play-1, $google-play-1);
31
- @include css-var(google-play-2, $google-play-2);
32
- @include css-var(instagram-0, $instagram-0);
33
- @include css-var(instagram-1, $instagram-1);
34
- @include css-var(instagram-2, $instagram-2);
35
- @include css-var(instagram-3, $instagram-3);
36
- @include css-var(instagram-4, $instagram-4);
37
- @include css-var(instagram-5, $instagram-5);
38
- @include css-var(instagram-6, $instagram-6);
39
-
40
- /// Application Colors
41
- @include shades('black', $black, lighten);
42
- @include shades('white', $white, darken);
43
- @include shades(glow, $trans-light, darken, 7, 10%, true);
44
- @include shades(shadow, $trans-dark, darken, 7, 10%, true);
45
-
46
- @include shades(brand, $brand);
47
- @include shades(accent, $accent);
48
- @include shades(success, $success);
49
- @include shades(danger, $danger);
50
- @include shades(warning, $warning);
51
- @include shades(info, $info);
25
+ @include css-var(amazon-0, $amazon-0);
26
+ @include css-var(amazon-1, $amazon-1);
27
+ @include css-var(napster-0, $napster-0);
28
+ @include css-var(napster-1, $napster-1);
29
+ @include css-var(google-play-0, $google-play-0);
30
+ @include css-var(google-play-1, $google-play-1);
31
+ @include css-var(google-play-2, $google-play-2);
32
+ @include css-var(instagram-0, $instagram-0);
33
+ @include css-var(instagram-1, $instagram-1);
34
+ @include css-var(instagram-2, $instagram-2);
35
+ @include css-var(instagram-3, $instagram-3);
36
+ @include css-var(instagram-4, $instagram-4);
37
+ @include css-var(instagram-5, $instagram-5);
38
+ @include css-var(instagram-6, $instagram-6);
39
+
40
+ /// Application Colors
41
+ @include shades('black', $black, lighten);
42
+ @include shades('white', $white, darken);
43
+ @include shades(glow, $trans-light, darken, 7, 10%, true);
44
+ @include shades(shadow, $trans-dark, darken, 7, 10%, true);
45
+
46
+ @include shades(brand, $brand);
47
+ @include shades(accent, $accent);
48
+ @include shades(success, $success);
49
+ @include shades(danger, $danger);
50
+ @include shades(warning, $warning);
51
+ @include shades(info, $info);
52
52
  }
53
53
 
54
54
  /// Light theme
55
55
  @mixin light-theme {
56
- @include css-var(fore, $fore);
57
- @include css-var(back, $back);
56
+ @include css-var(fore, $fore);
57
+ @include css-var(back, $back);
58
58
  }
59
59
 
60
60
  /// Dark theme
61
61
  @mixin dark-theme {
62
- @include css-var(fore, $back);
63
- @include css-var(back, $fore);
62
+ @include css-var(fore, $back);
63
+ @include css-var(back, $fore);
64
64
  }
65
65
 
66
66
  /// Apply themes
67
67
  :root {
68
- @if ($theme-default == light) {
69
- @include light-theme;
70
- } @else {
71
- @include dark-theme;
72
- }
68
+ @if ($theme-default ==light) {
69
+ @include light-theme;
70
+ }
71
+
72
+ @else {
73
+ @include dark-theme;
74
+ }
73
75
  }
74
76
 
75
77
  #{class(dark)} {
76
- @include dark-theme;
77
- color: css-var(fore);
78
+ @include dark-theme;
79
+ color: css-var(fore);
78
80
  }
79
81
 
80
82
  #{class(light)} {
81
- @include light-theme;
82
- color: css-var(fore);
83
+ @include light-theme;
84
+ color: css-var(fore);
83
85
  }
84
86
 
85
87
  #{class(success)} {
@@ -88,8 +90,9 @@
88
90
  }
89
91
 
90
92
  a {
91
- color: css-var($link-color);
92
- transition: color css-var(delay-default);
93
+ color: css-var($link-color);
94
+ transition-duration: css-var(delay-default);
95
+ transition-property: color, background-color;
93
96
 
94
97
  .fa-instagram {
95
98
  position: relative;
@@ -99,7 +102,7 @@ a {
99
102
  position: absolute;
100
103
  top: 50%;
101
104
  left: 50%;
102
- transform: translate(-50%, -50%);
105
+ transform: translate(-50%, -50%);
103
106
  opacity: 0;
104
107
  transition: opacity css-var(delay-default);
105
108
 
@@ -110,14 +113,15 @@ a {
110
113
  }
111
114
  }
112
115
 
113
- @include states(hover, focus, active) {
114
- color: css-var($link-color-hover);
116
+ @include states(hover, focus, active) {
117
+ color: css-var($link-color-hover);
115
118
 
116
- .fa-facebook, .fa-square-facebook {
119
+ .fa-facebook,
120
+ .fa-square-facebook {
117
121
  color: css-var(facebook);
118
122
  }
119
123
 
120
- .fa-instagram {
124
+ .fa-instagram {
121
125
  &::after {
122
126
  opacity: 1;
123
127
  }
@@ -128,8 +132,8 @@ a {
128
132
  }
129
133
 
130
134
  .fa-youtube {
131
- color: css-var(youtube);
132
- }
135
+ color: css-var(youtube);
136
+ }
133
137
 
134
138
  .fa-spotify {
135
139
  color: css-var(spotify);
@@ -148,19 +152,19 @@ a {
148
152
  }
149
153
 
150
154
  .fa-github {
151
- color: css-var(white-1);
152
- }
155
+ color: css-var(white-1);
156
+ }
153
157
 
154
- .fa-bitcoin {
155
- color: css-var(bitcoin);
156
- }
158
+ .fa-bitcoin {
159
+ color: css-var(bitcoin);
160
+ }
157
161
 
158
- .fa-ethereum {
159
- color: css-var(ethereum);
160
- }
162
+ .fa-ethereum {
163
+ color: css-var(ethereum);
164
+ }
161
165
 
162
- .fa-vimeo {
163
- color: css-var(venmo);
164
- }
165
- }
166
- }
166
+ .fa-vimeo {
167
+ color: css-var(venmo);
168
+ }
169
+ }
170
+ }