@aziziaziz/react-components 1.0.1 → 1.0.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.
@@ -0,0 +1,98 @@
1
+ .mainBtn {
2
+ border-radius: 10px;
3
+ padding: 10px 20px;
4
+ transition: var(--transTime), filter 0s;
5
+ border: none;
6
+ cursor: pointer;
7
+ box-shadow: 3px 3px 5px -2px rgba(var(--color-text-rgb), 0.5);
8
+ max-width: 260px;
9
+ width: 100%;
10
+ position: relative;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+
15
+ &:hover:enabled {
16
+ filter: brightness(1.25);
17
+ }
18
+
19
+ &:active,
20
+ &:disabled {
21
+ box-shadow: none;
22
+ }
23
+
24
+ &.medium__ {
25
+ font-size: 14px !important;
26
+ padding: 8px 16px;
27
+ }
28
+
29
+ &.small__ {
30
+ font-size: 10px !important;
31
+ padding: 6px 12px;
32
+ }
33
+
34
+ &.noMinWidth__ {
35
+ min-width: unset;
36
+ max-width: unset;
37
+ width: fit-content;
38
+ }
39
+ }
40
+
41
+ .submitBtn {
42
+ background-color: var(--btn-submit-bg);
43
+ color: var(--btn-submit-text);
44
+ }
45
+
46
+ .warningBtn {
47
+ background-color: var(--btn-warning-bg);
48
+ color: var(--btn-warning-text);
49
+ }
50
+
51
+ .dangerBtn {
52
+ background-color: var(--btn-danger-bg);
53
+ color: var(--btn-danger-text);
54
+ }
55
+
56
+ .disabledBtn {
57
+ background-color: var(--btn-disabled-bg);
58
+ color: var(--btn-disabled-text);
59
+ cursor: not-allowed;
60
+ opacity: 0.7;
61
+ }
62
+
63
+ .loadingCircle {
64
+ border-radius: 50%;
65
+ border-color: transparent gray gray gray;
66
+ border-width: 0.2em;
67
+ border-style: solid;
68
+ position: absolute;
69
+ height: 1.5em;
70
+ width: 1.5em;
71
+ animation: rotate 0.5s ease-in-out infinite;
72
+ opacity: 0;
73
+
74
+ &.show__ {
75
+ opacity: 1;
76
+ }
77
+ }
78
+
79
+ .hideContent {
80
+ opacity: 0;
81
+ }
82
+
83
+ @keyframes rotate {
84
+ 0% {
85
+ transform: rotate(0deg);
86
+ }
87
+ 100% {
88
+ transform: rotate(360deg);
89
+ }
90
+ }
91
+
92
+ @media (max-width: 799.98px) {
93
+ .mainBtn {
94
+ border-radius: 10px;
95
+ padding: 8px 16px;
96
+ max-width: 220px;
97
+ }
98
+ }
@@ -0,0 +1,44 @@
1
+ .datePickerMainContainer {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 6px;
6
+ }
7
+ .pickerContainer {
8
+ position: relative;
9
+ width: 100%;
10
+ color: var(--color-text);
11
+ background-color: var(--color-bg);
12
+ border: 1px solid var(--border-color);
13
+ outline: none;
14
+ border-radius: 8px;
15
+ transition: var(--transTime);
16
+ padding: 10px 15px;
17
+ height: 45px;
18
+ cursor: pointer;
19
+ display: grid;
20
+ grid-template-columns: 1fr auto;
21
+ align-items: center;
22
+ }
23
+ .valueContainer {
24
+ display: grid;
25
+ grid-template-columns: 1fr auto;
26
+ gap: 10px;
27
+ align-items: center;
28
+ }
29
+ .placeholder {
30
+ color: rgba(var(--color-text-rgb), 0.4);
31
+ }
32
+ .disabled {
33
+ background-color: var(--btn-disabled-bg);
34
+ color: var(--btn-disabled-text);
35
+ border-color: transparent;
36
+ cursor: not-allowed;
37
+ }
38
+ .dropdownIcon {
39
+ transition: var(--transTime);
40
+ transform: scaleY(1);
41
+ }
42
+ .dropdownIconFlip {
43
+ transform: scaleY(-1);
44
+ }
@@ -0,0 +1,53 @@
1
+ .drawerMainContainer {
2
+ position: fixed;
3
+ top: 0;
4
+ left: 0;
5
+ height: 100dvh;
6
+ width: 100dvw;
7
+ pointer-events: none;
8
+ z-index: 18;
9
+ }
10
+ .drawerBackgroundContainer {
11
+ height: 100%;
12
+ width: 100%;
13
+ position: absolute;
14
+ left: 0;
15
+ top: 0;
16
+ background-color: rgba(var(--color-bg-rgb), 0.75);
17
+ z-index: 1;
18
+ transition: var(--transTime);
19
+
20
+ &.show__ {
21
+ opacity: 1;
22
+ pointer-events: auto;
23
+ }
24
+
25
+ &.hide__ {
26
+ opacity: 0;
27
+ pointer-events: none;
28
+ }
29
+ }
30
+ .drawerContentContainer {
31
+ width: 100%;
32
+ position: absolute;
33
+ background-color: var(--color-bg);
34
+ padding: 10px;
35
+ bottom: 0;
36
+ max-height: 80%;
37
+ z-index: 2;
38
+ transition: var(--transTime);
39
+ box-shadow: 0 0 5px 0px var(--color-bg-reverse);
40
+ overflow: auto;
41
+
42
+ &.show__ {
43
+ transform: translate(0);
44
+ opacity: 1;
45
+ pointer-events: auto;
46
+ }
47
+
48
+ &.hide__ {
49
+ transform: translateY(100%);
50
+ opacity: 0;
51
+ pointer-events: none;
52
+ }
53
+ }
@@ -0,0 +1,114 @@
1
+ :root {
2
+ --optionsHeight: 40px;
3
+ }
4
+
5
+ .dropdownContainer {
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 6px;
9
+ width: 100%;
10
+ align-items: flex-start;
11
+ position: relative;
12
+ }
13
+ .dropdown {
14
+ width: 100%;
15
+ color: var(--color-text);
16
+ background-color: var(--color-bg);
17
+ border: 1px solid var(--border-color);
18
+ outline: none;
19
+ border-radius: 8px;
20
+ transition: var(--transTime);
21
+ padding: 10px 15px;
22
+ height: 45px;
23
+ display: grid;
24
+ align-items: center;
25
+ grid-template-columns: 1fr auto;
26
+ gap: 10px;
27
+ cursor: pointer;
28
+ transition: var(--transTime);
29
+ position: relative;
30
+
31
+ &.disabled__ {
32
+ background-color: var(--btn-disabled-bg);
33
+ color: var(--btn-disabled-text);
34
+ border-color: transparent;
35
+ cursor: not-allowed;
36
+ }
37
+
38
+ &.placeholder__ {
39
+ color: rgba(var(--color-text-rgb), 0.4);
40
+ }
41
+ }
42
+ .dropdownIcon {
43
+ transition: var(--transTime);
44
+ transform: scaleY(1);
45
+ }
46
+ .dropdownIconFlip {
47
+ transform: scaleY(-1);
48
+ }
49
+ .dropdownOptionsContainer {
50
+ position: absolute;
51
+ left: 0;
52
+ top: calc(100% + 10px);
53
+ border: 1px solid var(--border-color);
54
+ background-color: var(--color-bg);
55
+ border-radius: 10px;
56
+ width: 100%;
57
+ z-index: 2;
58
+ max-height: calc(var(--optionsHeight) * 5);
59
+ overflow: auto;
60
+ transition: var(--transTime);
61
+ scrollbar-gutter: auto;
62
+
63
+ &::-webkit-scrollbar {
64
+ width: 8px;
65
+ }
66
+
67
+ &::-webkit-scrollbar-thumb {
68
+ padding: 0;
69
+ margin: 0;
70
+ background-clip: padding-box;
71
+ border-radius: 50px;
72
+ background-color: rgba(var(--color-text-rgb), 0.75);
73
+ min-height: 60px;
74
+ }
75
+
76
+ &.show__ {
77
+ transform: translateY(0);
78
+ opacity: 1;
79
+ }
80
+
81
+ &.hide__ {
82
+ transform: translateY(-10%);
83
+ opacity: 0;
84
+ pointer-events: none;
85
+ }
86
+ }
87
+ .dropdownOptions {
88
+ height: var(--optionsHeight);
89
+ padding: 10px;
90
+ border-bottom: 1px solid var(--border-color);
91
+ display: grid;
92
+ grid-template-columns: 1fr auto;
93
+ gap: 10px;
94
+ align-items: center;
95
+ cursor: pointer;
96
+
97
+ &:hover {
98
+ background-color: rgba(var(--color-bg-rgb-reverse), 0.2);
99
+ }
100
+
101
+ &:last-child {
102
+ border-bottom: none;
103
+ }
104
+ }
105
+
106
+ @media (max-width: 799.98px) {
107
+ .dropdownOptionsContainer {
108
+ position: relative;
109
+ max-height: unset;
110
+ left: unset;
111
+ top: unset;
112
+ border: none;
113
+ }
114
+ }
@@ -0,0 +1,17 @@
1
+ .icon {
2
+ display: block;
3
+ -webkit-mask-size: contain;
4
+ mask-size: contain;
5
+ mask-repeat: no-repeat;
6
+ background-color: var(--color-text);
7
+ min-width: 1em;
8
+ min-height: 1em;
9
+ width: 1em;
10
+ height: 1em;
11
+
12
+ &.flat__ {
13
+ background: none;
14
+ mask: none;
15
+ }
16
+ }
17
+
@@ -0,0 +1,154 @@
1
+ :root {
2
+ --dateSize: 30px;
3
+ --monthWidth: 50px;
4
+ }
5
+
6
+ .webDatePickerMainContainer {
7
+ position: absolute;
8
+ left: 0;
9
+ top: calc(100% + 10px);
10
+ border: 1px solid var(--border-color);
11
+ padding: 10px;
12
+ border-radius: 8px;
13
+ background-color: var(--color-bg);
14
+ z-index: 3;
15
+ display: flex;
16
+ flex-direction: column;
17
+ gap: 10px;
18
+ transition: var(--transTime);
19
+
20
+ &.show__ {
21
+ opacity: 1;
22
+ pointer-events: auto;
23
+ transform: translateY(0);
24
+ }
25
+
26
+ &.hide__ {
27
+ opacity: 0;
28
+ pointer-events: none;
29
+ transform: translateY(-10%);
30
+ }
31
+ }
32
+ .topContainer {
33
+ width: 100%;
34
+ position: relative;
35
+ display: grid;
36
+ grid-template-columns: 1fr auto auto;
37
+ align-items: center;
38
+ gap: 10px;
39
+ }
40
+ .nextPreviousIcon {
41
+ cursor: pointer;
42
+
43
+ &.previous__ {
44
+ transform: scaleY(-1);
45
+ }
46
+ }
47
+ .monthName {
48
+ cursor: pointer;
49
+ user-select: none;
50
+
51
+ &.noClick__ {
52
+ cursor: default;
53
+ }
54
+ }
55
+ .dateMainContainer {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 10px;
59
+ }
60
+ .daysContainer,
61
+ .dateContainer {
62
+ display: grid;
63
+ grid-template-columns: repeat(7, auto);
64
+ }
65
+ .monthContainer {
66
+ display: grid;
67
+ row-gap: 6px;
68
+ column-gap: 30px;
69
+ grid-template-columns: repeat(3, auto);
70
+ }
71
+ .dateItem {
72
+ height: var(--dateSize);
73
+ width: var(--dateSize);
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ align-self: center;
78
+ justify-self: center;
79
+ cursor: pointer;
80
+
81
+ &.nextPreviousDate__ {
82
+ opacity: 0.3;
83
+ }
84
+
85
+ &.isToday__ {
86
+ background-color: #435585;
87
+ border-radius: 100%;
88
+
89
+ [data-theme="light"] & {
90
+ background-color: #9eb8ff;
91
+ }
92
+ }
93
+
94
+ &.isSelected__ {
95
+ box-shadow: inset 0 0 0 2px #818fb4;
96
+ border-radius: 100%;
97
+
98
+ [data-theme="light"] & {
99
+ box-shadow: inset 0 0 0 2px rgb(206, 219, 255);
100
+ }
101
+ }
102
+ }
103
+ .monthItem {
104
+ height: var(--monthWidth);
105
+ width: var(--monthWidth);
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ align-self: center;
110
+ justify-self: center;
111
+ cursor: pointer;
112
+
113
+ &.nextPreviousDate__ {
114
+ opacity: 0.3;
115
+ }
116
+
117
+ &.isToday__ {
118
+ background-color: #435585;
119
+ border-radius: 100%;
120
+
121
+ [data-theme="light"] & {
122
+ background-color: #9eb8ff;
123
+ }
124
+ }
125
+
126
+ &.isSelected__ {
127
+ box-shadow: inset 0 0 0 2px #818fb4;
128
+ border-radius: 100%;
129
+
130
+ [data-theme="light"] & {
131
+ box-shadow: inset 0 0 0 2px rgb(206, 219, 255);
132
+ }
133
+ }
134
+ }
135
+ .todayButton {
136
+ background-color: transparent;
137
+ border: 1px solid var(--border-color);
138
+ align-self: flex-end;
139
+ color: var(--color-text);
140
+
141
+ > :first-child {
142
+ font-size: 1.5em;
143
+ }
144
+ }
145
+
146
+ @media (max-width: 799.98px) {
147
+ .webDatePickerMainContainer {
148
+ position: relative;
149
+ left: unset;
150
+ top: unset;
151
+ border: none;
152
+ padding: 0;
153
+ }
154
+ }
@@ -45,3 +45,57 @@
45
45
  --skeleton-bg: rgb(180, 180, 180);
46
46
  --skeleton-fg: rgb(210, 210, 210);
47
47
  }
48
+
49
+ #snackbarRoot {
50
+ z-index: 17;
51
+ }
52
+ .snackbarContentContainer {
53
+ position: fixed;
54
+ margin: 0 auto;
55
+ bottom: 40px;
56
+ left: 50%;
57
+ transform: translateX(-50%);
58
+ max-width: 80dvw;
59
+ pointer-events: none;
60
+
61
+ > div {
62
+ width: 100%;
63
+ padding: 10px 30px;
64
+ border-radius: 10px;
65
+ text-align: center;
66
+ transition: var(--transTime);
67
+ pointer-events: auto;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ line-height: 1;
72
+
73
+ &.hide__ {
74
+ transform: translateY(250%);
75
+ }
76
+
77
+ &.show__ {
78
+ transform: translateY(0%);
79
+ }
80
+
81
+ &.danger__ {
82
+ background-color: var(--btn-danger-bg);
83
+ color: var(--btn-danger-text);
84
+ }
85
+
86
+ &.warning__ {
87
+ background-color: var(--btn-warning-bg);
88
+ color: var(--btn-warning-text);
89
+ }
90
+
91
+ &.info__ {
92
+ background-color: var(--color-bg-reverse);
93
+ color: var(--color-text-reverse);
94
+ }
95
+
96
+ &.success__ {
97
+ background-color: var(--btn-success-bg);
98
+ color: var(--btn-success-text);
99
+ }
100
+ }
101
+ }