@articles-media/articles-dev-box 1.0.0 → 1.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/README.md +18 -2
- package/index.js +5 -3
- package/package.json +21 -4
- package/src/components/Ads/Ad.jsx +629 -0
- package/src/components/Games/GameScoreboard.jsx +188 -0
- package/src/{ReturnToLauncherButton.jsx → components/Games/ReturnToLauncherButton.jsx} +3 -1
- package/src/hooks/Ads/useAd.js +55 -0
- package/src/hooks/Ads/useAds.js +54 -0
- package/src/hooks/Games/useGameScoreboard.js +59 -0
- package/src/styles/components/Ad.scss +223 -0
- package/src/styles/components/GameScoreboard.scss +37 -0
- package/src/styles/global.scss +98 -0
- package/src/styles/variables.scss +3 -0
- package/src/GameScoreboard.jsx +0 -17
- package/styles/components/GameScoreboard.scss +0 -3
- /package/src/{ArticlesAd.jsx → components/Ads/ArticlesAd.jsx} +0 -0
- /package/src/{Button.js → components/UI/Button.js} +0 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
@use "./variables.scss" as *;
|
|
4
|
+
|
|
5
|
+
@mixin alternate-scrollbar {
|
|
6
|
+
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// Define Bootstrap-like breakpoints
|
|
10
|
+
$grid-breakpoints: (
|
|
11
|
+
xs: 0,
|
|
12
|
+
sm: 576px,
|
|
13
|
+
md: 768px,
|
|
14
|
+
lg: 992px,
|
|
15
|
+
xl: 1200px,
|
|
16
|
+
xxl: 1400px
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
// Mixin for media-breakpoint-up
|
|
20
|
+
@mixin media-breakpoint-up($name) {
|
|
21
|
+
$min: map.get($grid-breakpoints, $name);
|
|
22
|
+
@if $min != null and $min != 0 {
|
|
23
|
+
@media (min-width: $min) {
|
|
24
|
+
@content;
|
|
25
|
+
}
|
|
26
|
+
} @else if $min == 0 {
|
|
27
|
+
@content;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Mixin for media-breakpoint-down
|
|
32
|
+
@mixin media-breakpoint-down($name) {
|
|
33
|
+
$max: map.get($grid-breakpoints, $name);
|
|
34
|
+
@if $max != null and $max != 0 {
|
|
35
|
+
@media (max-width: $max) {
|
|
36
|
+
@content;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
$shadow-articles: 0 0 0 1px rgba(0, 0, 0, 25%), 0 2px 3px rgba(0, 0, 0, 20%);
|
|
42
|
+
|
|
43
|
+
@mixin shadow-articles {
|
|
44
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 25%), 0 2px 3px rgba(0, 0, 0, 20%);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.shadow-articles {
|
|
48
|
+
box-shadow:
|
|
49
|
+
0 0 0 1px rgba(0, 0, 0, 30%),
|
|
50
|
+
0 2px 3px rgba(0, 0, 0, 20%);
|
|
51
|
+
@include shadow-articles;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// @mixin alternate-scrollbar {
|
|
55
|
+
// /* Width */
|
|
56
|
+
// &::-webkit-scrollbar {
|
|
57
|
+
// width: 10px;
|
|
58
|
+
// height: 10px;
|
|
59
|
+
// }
|
|
60
|
+
|
|
61
|
+
// /* Track */
|
|
62
|
+
// &::-webkit-scrollbar-track {
|
|
63
|
+
// background: rgba(255, 255, 255, 0);
|
|
64
|
+
// }
|
|
65
|
+
|
|
66
|
+
// /* Handle */
|
|
67
|
+
// &::-webkit-scrollbar-thumb {
|
|
68
|
+
// background: #000;
|
|
69
|
+
// height: 10px;
|
|
70
|
+
// height: 6px;
|
|
71
|
+
// border: 4px solid rgba(0, 0, 0, 0);
|
|
72
|
+
// background-clip: padding-box;
|
|
73
|
+
// -webkit-border-radius: 7px;
|
|
74
|
+
// background-color: rgba(0, 0, 0, 0.15);
|
|
75
|
+
// -webkit-box-shadow:
|
|
76
|
+
// inset -1px -1px 0px rgba(0, 0, 0, 0.473),
|
|
77
|
+
// inset 1px 1px 0px rgba(0, 0, 0, 0.493);
|
|
78
|
+
// }
|
|
79
|
+
|
|
80
|
+
// /* Handle on hover */
|
|
81
|
+
// &::-webkit-scrollbar-thumb:hover {
|
|
82
|
+
// background: rgba(128, 128, 128, 0.5);
|
|
83
|
+
// }
|
|
84
|
+
// }
|
|
85
|
+
|
|
86
|
+
.text-center {
|
|
87
|
+
text-align: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.d-flex {
|
|
91
|
+
display: flex;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.flex-header {
|
|
95
|
+
display: flex;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
package/src/GameScoreboard.jsx
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles/components/GameScoreboard.scss';
|
|
3
|
-
|
|
4
|
-
const GameScoreboard = () => {
|
|
5
|
-
return (
|
|
6
|
-
<div className='articles-game-scoreboard'>
|
|
7
|
-
<h2>Game Scoreboard</h2>
|
|
8
|
-
<p>This is a test scoreboard component.</p>
|
|
9
|
-
<ul>
|
|
10
|
-
<li>Player 1: 100</li>
|
|
11
|
-
<li>Player 2: 200</li>
|
|
12
|
-
</ul>
|
|
13
|
-
</div>
|
|
14
|
-
);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export default GameScoreboard;
|
|
File without changes
|
|
File without changes
|