@appartmint/mint 0.0.1 → 0.0.2
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.
- package/package.json +2 -2
- package/src/scss/imports/global/animations.scss +30 -0
- package/src/scss/imports/global/global.scss +66 -0
- package/src/scss/imports/global/structure.scss +84 -0
- package/src/scss/imports/global/text.scss +60 -0
- package/src/scss/imports/global/themes.scss +115 -0
- package/src/scss/imports/vars.scss +57 -0
- package/src/scss/mint.scss +55 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appartmint/mint",
|
|
3
3
|
"author": "App/Art Mint",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.2",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "The front-end TS/SCSS framework of App/Art Mint",
|
|
7
7
|
"keywords": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"main": "dist/js/index.min.js",
|
|
23
23
|
"types": "dist/js/index.d.ts",
|
|
24
24
|
"files": [
|
|
25
|
-
"src/scss
|
|
25
|
+
"src/scss/**/*.scss",
|
|
26
26
|
"dist/**/*.{css,js,d.ts,map}"
|
|
27
27
|
],
|
|
28
28
|
"directories": {
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// animations.scss - Global animations
|
|
2
|
+
/// @author App/Art Mint
|
|
3
|
+
///
|
|
4
|
+
/// @group Animations
|
|
5
|
+
@charset 'utf-8';
|
|
6
|
+
|
|
7
|
+
/// Imports
|
|
8
|
+
@use 'sass:math';
|
|
9
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
10
|
+
|
|
11
|
+
/// Animations
|
|
12
|
+
/// Cycle through instagram colors
|
|
13
|
+
@keyframes instafade {
|
|
14
|
+
@for $i from 0 through 6 {
|
|
15
|
+
$percent: percentage(math.div($i, 6));
|
|
16
|
+
#{$percent} {
|
|
17
|
+
color: css-var(instagram-#{$i});
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/// CSS variables
|
|
23
|
+
:root {
|
|
24
|
+
@include css-var(delay-instant, delay(instant));
|
|
25
|
+
@include css-var(delay-fast, delay(fast));
|
|
26
|
+
@include css-var(delay-med-fast, delay(med-fast));
|
|
27
|
+
@include css-var(delay-default, delay(default));
|
|
28
|
+
@include css-var(delay-med-slow, delay(med-slow));
|
|
29
|
+
@include css-var(delay-slow, delay(slow));
|
|
30
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/// Imports
|
|
2
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
3
|
+
@use '../vars' as *;
|
|
4
|
+
|
|
5
|
+
/// Global styles
|
|
6
|
+
* {
|
|
7
|
+
&, &::before, &::after {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html, body {
|
|
13
|
+
color: css-var(fore);
|
|
14
|
+
background-color: css-var(back);
|
|
15
|
+
overflow-x: hidden;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
html, body, main {
|
|
19
|
+
width: 100%;
|
|
20
|
+
min-height: 100vh;
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
main {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
position: relative;
|
|
29
|
+
z-index: 1000;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
nav {
|
|
33
|
+
a {
|
|
34
|
+
display: block;
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
ul {
|
|
39
|
+
display: flex;
|
|
40
|
+
margin: 0;
|
|
41
|
+
padding: 0;
|
|
42
|
+
list-style: none;
|
|
43
|
+
|
|
44
|
+
& > li > ul {
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a {
|
|
51
|
+
&[href^='tel:'], &[href^='mailto:'] {
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
button {
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
a, button {
|
|
61
|
+
font-size: inherit;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
img {
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/// Imports
|
|
2
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
3
|
+
@use '../vars' as *;
|
|
4
|
+
|
|
5
|
+
/// Structure styles
|
|
6
|
+
#{class(pad)} {
|
|
7
|
+
@include break-util(padding, 1rem, 0);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
#{class(margin)} {
|
|
11
|
+
@include break-util(margin, 1rem, 0);
|
|
12
|
+
|
|
13
|
+
&-auto {
|
|
14
|
+
margin: auto;
|
|
15
|
+
|
|
16
|
+
&-v {
|
|
17
|
+
margin: 1rem auto;
|
|
18
|
+
|
|
19
|
+
@for $i from 1 through 6 {
|
|
20
|
+
&#{$i} {
|
|
21
|
+
margin: 1rem * $i auto;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-v {
|
|
28
|
+
margin: 1rem 0;
|
|
29
|
+
|
|
30
|
+
@for $i from 1 through 6 {
|
|
31
|
+
&#{$i} {
|
|
32
|
+
margin: 1rem * $i 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&-h {
|
|
38
|
+
margin: 0 1rem;
|
|
39
|
+
|
|
40
|
+
@for $i from 1 through 6 {
|
|
41
|
+
&#{$i} {
|
|
42
|
+
margin: 0 1rem * $i;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
section {
|
|
49
|
+
&#{class(smaller)} {
|
|
50
|
+
margin-left: auto;
|
|
51
|
+
margin-right: auto;
|
|
52
|
+
max-width: break(xs);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&#{class(small)} {
|
|
56
|
+
margin-left: auto;
|
|
57
|
+
margin-right: auto;
|
|
58
|
+
max-width: break(sm);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&#{class(default)} {
|
|
62
|
+
margin-left: auto;
|
|
63
|
+
margin-right: auto;
|
|
64
|
+
max-width: break(md);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&#{class(big)} {
|
|
68
|
+
margin-left: auto;
|
|
69
|
+
margin-right: auto;
|
|
70
|
+
max-width: break(lg);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&#{class(bigger)} {
|
|
74
|
+
margin-left: auto;
|
|
75
|
+
margin-right: auto;
|
|
76
|
+
max-width: break(xl);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
#{class(center)} {
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
text-align: center;
|
|
84
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/// text.scss - Text styles
|
|
2
|
+
/// @author App/Art Mint
|
|
3
|
+
///
|
|
4
|
+
/// @group Animations
|
|
5
|
+
@charset 'utf-8';
|
|
6
|
+
|
|
7
|
+
/// Imports
|
|
8
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
9
|
+
|
|
10
|
+
/// Fonts
|
|
11
|
+
$font-primary: 'Palanquin' !default;
|
|
12
|
+
$font-secondary: 'JosefinSans' !default;
|
|
13
|
+
$font-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
|
|
14
|
+
|
|
15
|
+
/// Font Sizes
|
|
16
|
+
$font-size-mobile: (
|
|
17
|
+
h1: 2.5rem,
|
|
18
|
+
h2: 2rem,
|
|
19
|
+
h3: 1.75rem,
|
|
20
|
+
h4: 1.5rem,
|
|
21
|
+
h5: 1.25rem,
|
|
22
|
+
h6: 1.125rem,
|
|
23
|
+
p: 1rem,
|
|
24
|
+
) !default;
|
|
25
|
+
$font-size-desktop: (
|
|
26
|
+
h1: 3rem,
|
|
27
|
+
h2: 2.5rem,
|
|
28
|
+
h3: 2rem,
|
|
29
|
+
h4: 1.75rem,
|
|
30
|
+
h5: 1.5rem,
|
|
31
|
+
h6: 1.25rem,
|
|
32
|
+
p: 1.125rem,
|
|
33
|
+
) !default;
|
|
34
|
+
|
|
35
|
+
/// Text Styles
|
|
36
|
+
html, body {
|
|
37
|
+
font-family: $font-primary, $font-backups;
|
|
38
|
+
font-size: 1rem;
|
|
39
|
+
|
|
40
|
+
@include break(md) {
|
|
41
|
+
font-size: 1.125rem;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@for $i from 1 through 6 {
|
|
46
|
+
h#{$i}, .h#{$i} {
|
|
47
|
+
font-family: $font-secondary, $font-backups;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@each $tag in map-keys($font-size-mobile) {
|
|
52
|
+
#{$tag}, .#{$tag} {
|
|
53
|
+
margin: 1rem 0;
|
|
54
|
+
font-size: map-get($font-size-mobile, $tag);
|
|
55
|
+
|
|
56
|
+
@include break(md) {
|
|
57
|
+
font-size: map-get($font-size-desktop, $tag);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
/// themes.scss - Styles for light and dark themes
|
|
2
|
+
/// @author App/Art Mint
|
|
3
|
+
///
|
|
4
|
+
/// @group Themes
|
|
5
|
+
@charset 'utf-8';
|
|
6
|
+
|
|
7
|
+
/// Imports
|
|
8
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
9
|
+
@use '../vars' as *;
|
|
10
|
+
|
|
11
|
+
/// Global theme
|
|
12
|
+
:root {
|
|
13
|
+
/// Global Colors
|
|
14
|
+
/// Brands
|
|
15
|
+
@include css-var(bitcoin, $bitcoin);
|
|
16
|
+
@include css-var(ethereum, $ethereum);
|
|
17
|
+
@include css-var(venmo, $venmo);
|
|
18
|
+
@include css-var(facebook, $facebook);
|
|
19
|
+
@include css-var(youtube, $youtube);
|
|
20
|
+
@include css-var(itunes, $itunes);
|
|
21
|
+
@include css-var(spotify, $spotify);
|
|
22
|
+
@include css-var(amazon-0, $amazon-0);
|
|
23
|
+
@include css-var(amazon-1, $amazon-1);
|
|
24
|
+
@include css-var(napster-0, $napster-0);
|
|
25
|
+
@include css-var(napster-1, $napster-1);
|
|
26
|
+
@include css-var(google-play-0, $google-play-0);
|
|
27
|
+
@include css-var(google-play-1, $google-play-1);
|
|
28
|
+
@include css-var(google-play-2, $google-play-2);
|
|
29
|
+
@include css-var(instagram-0, $instagram-0);
|
|
30
|
+
@include css-var(instagram-1, $instagram-1);
|
|
31
|
+
@include css-var(instagram-2, $instagram-2);
|
|
32
|
+
@include css-var(instagram-3, $instagram-3);
|
|
33
|
+
@include css-var(instagram-4, $instagram-4);
|
|
34
|
+
@include css-var(instagram-5, $instagram-5);
|
|
35
|
+
@include css-var(instagram-6, $instagram-6);
|
|
36
|
+
|
|
37
|
+
/// Application Colors
|
|
38
|
+
@include shades('black', $black, lighten);
|
|
39
|
+
@include shades('white', $white, darken);
|
|
40
|
+
@include shades(trans, $trans, darken, 7, 10%, true);
|
|
41
|
+
|
|
42
|
+
@include shades(brand, $brand);
|
|
43
|
+
@include shades(accent, $accent);
|
|
44
|
+
@include shades(success, $success);
|
|
45
|
+
@include shades(danger, $danger);
|
|
46
|
+
@include shades(warning, $warning);
|
|
47
|
+
@include shades(info, $info);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/// Light theme
|
|
51
|
+
@mixin light-theme {
|
|
52
|
+
@include css-var(fore, $fore);
|
|
53
|
+
@include css-var(back, $back);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/// Dark theme
|
|
57
|
+
@mixin dark-theme {
|
|
58
|
+
@include css-var(fore, $back);
|
|
59
|
+
@include css-var(back, $fore);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/// Apply themes
|
|
63
|
+
:root {
|
|
64
|
+
@if ($theme-default == light) {
|
|
65
|
+
@include light-theme;
|
|
66
|
+
} @else {
|
|
67
|
+
@include dark-theme;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#{class(dark)} {
|
|
72
|
+
@include dark-theme;
|
|
73
|
+
color: css-var(fore);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
#{class(light)} {
|
|
77
|
+
@include light-theme;
|
|
78
|
+
color: css-var(fore);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
a {
|
|
82
|
+
color: css-var(brand);
|
|
83
|
+
|
|
84
|
+
@include states(hover, focus, active) {
|
|
85
|
+
color: css-var(accent-0);
|
|
86
|
+
|
|
87
|
+
.fa-github {
|
|
88
|
+
color: css-var(white-1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.fa-youtube {
|
|
92
|
+
color: css-var(youtube);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.fa-instagram {
|
|
96
|
+
color: css-var(instagram-0)
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.fa-bitcoin {
|
|
100
|
+
color: css-var(bitcoin);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.fa-ethereum {
|
|
104
|
+
color: css-var(ethereum);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.fa-vimeo {
|
|
108
|
+
color: css-var(venmo);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
i {
|
|
113
|
+
transition: color delay(slow);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/// vars.scss - Global variables
|
|
2
|
+
/// @author App/Art Mint
|
|
3
|
+
///
|
|
4
|
+
/// @group Vars
|
|
5
|
+
@charset 'utf-8';
|
|
6
|
+
|
|
7
|
+
/// Imports
|
|
8
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
9
|
+
|
|
10
|
+
/// Global Colors
|
|
11
|
+
$bitcoin: #FF9900;
|
|
12
|
+
$ethereum: #3C3C3D;
|
|
13
|
+
$venmo: #008CFF;
|
|
14
|
+
$facebook: #3b5998;
|
|
15
|
+
$youtube: #F00;
|
|
16
|
+
$itunes: #DDD;
|
|
17
|
+
$spotify: #84bd00;
|
|
18
|
+
$amazon-0: #F90;
|
|
19
|
+
$amazon-1: #146eb4;
|
|
20
|
+
$napster-0: #2ca6de;
|
|
21
|
+
$napster-1: #fdb813;
|
|
22
|
+
$google-play-0: #f55a34;
|
|
23
|
+
$google-play-1: #ffd119;
|
|
24
|
+
$google-play-2: #ff8c00;
|
|
25
|
+
$instagram-0: #8a3ab9;
|
|
26
|
+
$instagram-1: #4c68d7;
|
|
27
|
+
$instagram-2: #cd486b;
|
|
28
|
+
$instagram-3: #fbad50;
|
|
29
|
+
$instagram-4: #fccc63;
|
|
30
|
+
$instagram-5: #bc2a8d;
|
|
31
|
+
$instagram-6: #e95950;
|
|
32
|
+
|
|
33
|
+
/// Application Colors
|
|
34
|
+
$black: #000 !default;
|
|
35
|
+
$white: #fff !default;
|
|
36
|
+
$grey: #888 !default;
|
|
37
|
+
$trans: rgba(0, 0, 0, 0) !default;
|
|
38
|
+
|
|
39
|
+
$brand: #4682b4 !default;
|
|
40
|
+
$accent: #483d8b !default;
|
|
41
|
+
$success: #208a20 !default;
|
|
42
|
+
$danger: #ff4d4d !default;
|
|
43
|
+
$warning: #ffaa22 !default;
|
|
44
|
+
$info: $brand !default;
|
|
45
|
+
|
|
46
|
+
$fore: lighten($black, 10%) !default;
|
|
47
|
+
$back: darken($white, 10%) !default;
|
|
48
|
+
|
|
49
|
+
/// Structure
|
|
50
|
+
$nav-height: 4rem !default;
|
|
51
|
+
|
|
52
|
+
/// Default theme
|
|
53
|
+
$theme-default: light !default;
|
|
54
|
+
|
|
55
|
+
/// Outline width
|
|
56
|
+
$outline-width: 0.125rem !default;
|
|
57
|
+
$border-radius: 0.25rem !default;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/// Imports
|
|
2
|
+
@use '@appartmint/util/src/scss/imports/util' as *;
|
|
3
|
+
@use './imports/global/animations.scss';
|
|
4
|
+
@use './imports/global/global.scss';
|
|
5
|
+
@use './imports/global/structure.scss';
|
|
6
|
+
@use './imports/global/themes.scss';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
/// Global Styles
|
|
10
|
+
#{class(bg)} {
|
|
11
|
+
display: block;
|
|
12
|
+
opacity: 0;
|
|
13
|
+
height: 0;
|
|
14
|
+
width: 0;
|
|
15
|
+
z-index: -1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
#{class(vp-fall-in)} {
|
|
19
|
+
opacity: 0;
|
|
20
|
+
transform: translateY(-100px);
|
|
21
|
+
transition: opacity 500ms, transform 500ms !important;
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
|
|
24
|
+
&.visible {
|
|
25
|
+
opacity: 1;
|
|
26
|
+
transform: translateY(0%);
|
|
27
|
+
pointer-events: auto;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#{class(pill)} {
|
|
32
|
+
display: inline-block;
|
|
33
|
+
padding: 0 0.75rem;
|
|
34
|
+
border-radius: 1rem;
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
color: css-var(fore);
|
|
37
|
+
background: css-var(brand-5);
|
|
38
|
+
|
|
39
|
+
@include states(hover, focus, active) {
|
|
40
|
+
color: css-var(back);
|
|
41
|
+
background: css-var(brand-3);
|
|
42
|
+
outline-color: css-var(brand-0);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&#{class(alt)} {
|
|
46
|
+
color: css-var(brand-3);
|
|
47
|
+
background: css-var(trans);
|
|
48
|
+
|
|
49
|
+
@include states(hover, focus, active) {
|
|
50
|
+
color: css-var(fore);
|
|
51
|
+
background: css-var(trans);
|
|
52
|
+
outline-color: css-var(accent-2);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|