sccoreui 3.4.4 → 3.4.6

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/dist/App.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  // import Home from './pages/home';
5
+ require("./App.scss");
5
6
  const App = () => {
6
7
  return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}) }));
7
8
  };
package/dist/App.scss ADDED
@@ -0,0 +1,130 @@
1
+ @import url("./assets/theme.css");
2
+ @import url("./assets/sccoreui.css");
3
+ @import url("./assets/sccoreicons.css");
4
+ @import url("./assets/flex.css");
5
+
6
+ :root {
7
+ --fw-600: 600;
8
+ --fw-400: 400;
9
+ --fs-24: 24px;
10
+ --fs-18: 18px;
11
+ --fs-16: 16px;
12
+ --lh: 24px;
13
+ --fs-14: 14px;
14
+ --grey-bg: #101828;
15
+ --border-none: border-none;
16
+ }
17
+
18
+ @font-face {
19
+ font-family: "Lato-400";
20
+ font-weight: 400;
21
+ src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
22
+ }
23
+
24
+ @font-face {
25
+ font-family: "Lato-600";
26
+ font-weight: 600;
27
+ src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
28
+ }
29
+
30
+ // * {
31
+ // padding: 0;
32
+ // margin: 0;
33
+ // }
34
+
35
+ body {
36
+ font-family: "Lato-400", sans-serif;
37
+ -webkit-font-smoothing: antialiased;
38
+ -moz-osx-font-smoothing: grayscale;
39
+ line-height: var(--lh);
40
+ padding: 0;
41
+ margin: 0;
42
+ }
43
+
44
+ code {
45
+ font-family: "Lato-400", monospace;
46
+ }
47
+
48
+ h1 {
49
+ font-size: var(--fs-24);
50
+ font-weight: var(--fw-600);
51
+ }
52
+
53
+ h2 {
54
+ font-size: var(--fs-18);
55
+ font-weight: var(--fw-600);
56
+ }
57
+
58
+ h3 {
59
+ font-size: var(--fs-16);
60
+ font-weight: var(--fw-400);
61
+ }
62
+
63
+ // ============= custom progress steps =============== //
64
+
65
+ .progress-container {
66
+ isolation: isolate;
67
+
68
+ &::before {
69
+ content: "";
70
+ background-color: var(--gray-200);
71
+ position: absolute;
72
+ z-index: -1;
73
+ }
74
+
75
+ &.horizontal::before {
76
+ height: 2px;
77
+ width: 100%;
78
+ top: 11%;
79
+ }
80
+
81
+ &.vertical::before {
82
+ height: 100%;
83
+ width: 2px;
84
+ left: 5%;
85
+ top: 0;
86
+ }
87
+ }
88
+
89
+ .progressbar {
90
+ z-index: -1;
91
+ transition: all 0.6s ease;
92
+
93
+ &.horizontal {
94
+ left: 0;
95
+ height: 2px;
96
+ top: 11%;
97
+ }
98
+
99
+ &.vertical {
100
+ width: 2px;
101
+ left: 5%;
102
+ top: 0;
103
+ }
104
+ }
105
+
106
+ .progress-step-item {
107
+ &.horizontal {
108
+ // transform: translateX(10%);
109
+
110
+ &:nth-of-type(1) {
111
+ transform: translateX(-50%);
112
+ }
113
+
114
+ &:last-child {
115
+ transform: translateX(50%);
116
+ }
117
+ }
118
+
119
+ &.vertical {
120
+ transform: translateY(50%);
121
+
122
+ &:nth-of-type(1) {
123
+ transform: translateY(-5%);
124
+ }
125
+
126
+ &:last-child {
127
+ transform: translateY(100%);
128
+ }
129
+ }
130
+ }
@@ -0,0 +1,130 @@
1
+ @import url("./assets/theme.css");
2
+ @import url("./assets/sccoreui.css");
3
+ @import url("./assets/sccoreicons.css");
4
+ @import url("./assets/flex.css");
5
+
6
+ :root {
7
+ --fw-600: 600;
8
+ --fw-400: 400;
9
+ --fs-24: 24px;
10
+ --fs-18: 18px;
11
+ --fs-16: 16px;
12
+ --lh: 24px;
13
+ --fs-14: 14px;
14
+ --grey-bg: #101828;
15
+ --border-none: border-none;
16
+ }
17
+
18
+ @font-face {
19
+ font-family: "Lato-400";
20
+ font-weight: 400;
21
+ src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
22
+ }
23
+
24
+ @font-face {
25
+ font-family: "Lato-600";
26
+ font-weight: 600;
27
+ src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
28
+ }
29
+
30
+ // * {
31
+ // padding: 0;
32
+ // margin: 0;
33
+ // }
34
+
35
+ body {
36
+ font-family: "Lato-400", sans-serif;
37
+ -webkit-font-smoothing: antialiased;
38
+ -moz-osx-font-smoothing: grayscale;
39
+ line-height: var(--lh);
40
+ padding: 0;
41
+ margin: 0;
42
+ }
43
+
44
+ code {
45
+ font-family: "Lato-400", monospace;
46
+ }
47
+
48
+ h1 {
49
+ font-size: var(--fs-24);
50
+ font-weight: var(--fw-600);
51
+ }
52
+
53
+ h2 {
54
+ font-size: var(--fs-18);
55
+ font-weight: var(--fw-600);
56
+ }
57
+
58
+ h3 {
59
+ font-size: var(--fs-16);
60
+ font-weight: var(--fw-400);
61
+ }
62
+
63
+ // ============= custom progress steps =============== //
64
+
65
+ .progress-container {
66
+ isolation: isolate;
67
+
68
+ &::before {
69
+ content: "";
70
+ background-color: var(--gray-200);
71
+ position: absolute;
72
+ z-index: -1;
73
+ }
74
+
75
+ &.horizontal::before {
76
+ height: 2px;
77
+ width: 100%;
78
+ top: 11%;
79
+ }
80
+
81
+ &.vertical::before {
82
+ height: 100%;
83
+ width: 2px;
84
+ left: 5%;
85
+ top: 0;
86
+ }
87
+ }
88
+
89
+ .progressbar {
90
+ z-index: -1;
91
+ transition: all 0.6s ease;
92
+
93
+ &.horizontal {
94
+ left: 0;
95
+ height: 2px;
96
+ top: 11%;
97
+ }
98
+
99
+ &.vertical {
100
+ width: 2px;
101
+ left: 5%;
102
+ top: 0;
103
+ }
104
+ }
105
+
106
+ .progress-step-item {
107
+ &.horizontal {
108
+ // transform: translateX(10%);
109
+
110
+ &:nth-of-type(1) {
111
+ transform: translateX(-50%);
112
+ }
113
+
114
+ &:last-child {
115
+ transform: translateX(50%);
116
+ }
117
+ }
118
+
119
+ &.vertical {
120
+ transform: translateY(50%);
121
+
122
+ &:nth-of-type(1) {
123
+ transform: translateY(-5%);
124
+ }
125
+
126
+ &:last-child {
127
+ transform: translateY(100%);
128
+ }
129
+ }
130
+ }