px-react-ui-components 1.1.9 → 1.1.11

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.
@@ -1,118 +1,118 @@
1
-
2
- .react-confirm-alert-blur {
3
- filter: url(#gaussian-blur);
4
- filter: blur(2px);
5
- -webkit-filter: blur(2px);
6
- }
7
-
8
- .react-confirm-alert-overlay {
9
- position: fixed;
10
- top: 0;
11
- left: 0;
12
- right: 0;
13
- bottom: 0;
14
- z-index: 9999;
15
- background: rgba(99, 99, 99, 0.9);
16
- display: -webkit-flex;
17
- display: -moz-flex;
18
- display: -ms-flex;
19
- display: -o-flex;
20
- display: flex;
21
- justify-content: center;
22
- -ms-align-items: center;
23
- align-items: center;
24
- opacity: 0;
25
- -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
26
- -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
27
- -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
28
- animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
29
- }
30
-
31
- .react-confirm-alert-body {
32
- font-family: "Nunito", sans-serif;
33
- width: 90%; /* Daha geniş cihazlarda %90 genişlik */
34
- max-width: 400px; /* Maksimum genişlik sınırı */
35
- padding: 20px;
36
- text-align: left;
37
- background: #fff;
38
- border-radius: 10px;
39
- box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
40
- color: #666;
41
- text-align: center;
42
- margin: 0 auto; /* Orta hizalama */
43
- }
44
-
45
- @media (max-width: 600px) {
46
- .react-confirm-alert-body {
47
- width: 95%; /* Küçük ekranlarda daha fazla boşluk */
48
- max-width: 320px; /* Maksimum genişlik daha küçük */
49
- }
50
- }
51
-
52
- .react-confirm-alert-svg {
53
- position: absolute;
54
- top: 0;
55
- left: 0;
56
- }
57
-
58
- .react-confirm-alert-body > h1 {
59
- margin-top: 0;
60
- color: #1e293b !important;
61
- font-weight: bold;
62
- font-size: 1.3em;
63
- border-radius: 0px;
64
- }
65
-
66
- .react-confirm-alert-body > h3 {
67
- margin: 0;
68
- font-size: 3.5em !important;
69
- color: #1e293b !important;
70
- }
71
-
72
- .react-confirm-alert-button-group {
73
- display: -webkit-flex;
74
- display: -moz-flex;
75
- display: -ms-flex;
76
- display: -o-flex;
77
- display: flex;
78
- justify-content: space-between;
79
- margin-top: 15px !important;
80
- }
81
-
82
- .react-confirm-alert-button-group > button {
83
- outline: none;
84
- background: #1e293b;
85
- border: none;
86
- display: inline-block;
87
- padding: 10px 18px;
88
- color: #fff;
89
- margin-right: 10px;
90
- border-radius: 5px;
91
- font-size: 1em;
92
- cursor: pointer;
93
- width: 100%;
94
-
95
- &:hover {
96
- opacity: 0.8;
97
- }
98
-
99
- &:last-child {
100
- background: #506280 !important;
101
- color: #fff;
102
- }
103
- &:first-child {
104
- background: #1e293b !important;
105
- color: #fff;
106
- }
107
- }
108
-
109
- .react-confirm-alert-body {
110
- width: 500px;
111
- max-width: 500px !important;
112
- max-height: unset !important;
113
- }
114
-
115
- .react-confirm-alert-body > div {
116
- max-height: 250px !important;
117
- overflow: auto;
1
+
2
+ .react-confirm-alert-blur {
3
+ filter: url(#gaussian-blur);
4
+ filter: blur(2px);
5
+ -webkit-filter: blur(2px);
6
+ }
7
+
8
+ .react-confirm-alert-overlay {
9
+ position: fixed;
10
+ top: 0;
11
+ left: 0;
12
+ right: 0;
13
+ bottom: 0;
14
+ z-index: 9999;
15
+ background: rgba(99, 99, 99, 0.9);
16
+ display: -webkit-flex;
17
+ display: -moz-flex;
18
+ display: -ms-flex;
19
+ display: -o-flex;
20
+ display: flex;
21
+ justify-content: center;
22
+ -ms-align-items: center;
23
+ align-items: center;
24
+ opacity: 0;
25
+ -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
26
+ -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
27
+ -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
28
+ animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
29
+ }
30
+
31
+ .react-confirm-alert-body {
32
+ font-family: "Nunito", sans-serif;
33
+ width: 90%; /* Daha geniş cihazlarda %90 genişlik */
34
+ max-width: 400px; /* Maksimum genişlik sınırı */
35
+ padding: 20px;
36
+ text-align: left;
37
+ background: #fff;
38
+ border-radius: 10px;
39
+ box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
40
+ color: #666;
41
+ text-align: center;
42
+ margin: 0 auto; /* Orta hizalama */
43
+ }
44
+
45
+ @media (max-width: 600px) {
46
+ .react-confirm-alert-body {
47
+ width: 95%; /* Küçük ekranlarda daha fazla boşluk */
48
+ max-width: 320px; /* Maksimum genişlik daha küçük */
49
+ }
50
+ }
51
+
52
+ .react-confirm-alert-svg {
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ }
57
+
58
+ .react-confirm-alert-body > h1 {
59
+ margin-top: 0;
60
+ color: #1e293b !important;
61
+ font-weight: bold;
62
+ font-size: 1.3em;
63
+ border-radius: 0px;
64
+ }
65
+
66
+ .react-confirm-alert-body > h3 {
67
+ margin: 0;
68
+ font-size: 3.5em !important;
69
+ color: #1e293b !important;
70
+ }
71
+
72
+ .react-confirm-alert-button-group {
73
+ display: -webkit-flex;
74
+ display: -moz-flex;
75
+ display: -ms-flex;
76
+ display: -o-flex;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ margin-top: 15px !important;
80
+ }
81
+
82
+ .react-confirm-alert-button-group > button {
83
+ outline: none;
84
+ background: #1e293b;
85
+ border: none;
86
+ display: inline-block;
87
+ padding: 10px 18px;
88
+ color: #fff;
89
+ margin-right: 10px;
90
+ border-radius: 5px;
91
+ font-size: 1em;
92
+ cursor: pointer;
93
+ width: 100%;
94
+
95
+ &:hover {
96
+ opacity: 0.8;
97
+ }
98
+
99
+ &:last-child {
100
+ background: #506280 !important;
101
+ color: #fff;
102
+ }
103
+ &:first-child {
104
+ background: #1e293b !important;
105
+ color: #fff;
106
+ }
107
+ }
108
+
109
+ .react-confirm-alert-body {
110
+ width: 500px;
111
+ max-width: 500px !important;
112
+ max-height: unset !important;
113
+ }
114
+
115
+ .react-confirm-alert-body > div {
116
+ max-height: 250px !important;
117
+ overflow: auto;
118
118
  }
@@ -1,110 +1,96 @@
1
- .container {
2
- position: relative;
3
- display: block;
4
- width: 100%;
5
- background: #ffff;
6
- border-radius: 15px;
7
- }
8
-
9
- .header {
10
- position: relative;
11
- display: block;
12
- width: 100%;
13
- padding: 15px;
14
- padding-left: 20px;
15
- padding-bottom: 7.5px;
16
- border-bottom: 1px solid #d0d6de;
17
- color: #464255;
18
- }
19
-
20
- .title {
21
- margin: 0px !important;
22
- }
23
-
24
- .description {
25
- font-size: 12px;
26
- }
27
-
28
- .rightBlock {
29
- position: absolute;
30
- right: 15px;
31
- z-index: 2;
32
- top: 50%;
33
- transform: translateY(-50%);
34
- display: flex;
35
- flex-direction: row;
36
- gap: 10px;
37
- }
38
-
39
- .rightBlock button {
40
- display: flex;
41
- flex-direction: row;
42
- gap: 10px;
43
- justify-items: center;
44
- align-items: center;
45
- padding: 10px 15px;
46
- }
47
-
48
- .body {
49
- display: block;
50
- width: 100%;
51
- padding: 15px;
52
- }
53
-
54
- .footer {
55
- display: block;
56
- width: 100%;
57
- padding: 15px;
58
- border-top: 1px solid #d0d6de;
59
- }
60
-
61
- @media screen and (max-width: 768px) {
62
- .header {
63
- padding: 10px;
64
- padding-left: 15px;
65
- padding-bottom: 5px;
66
- }
67
-
68
- .rightBlock {
69
- position: relative;
70
- right: auto;
71
- top: auto;
72
- transform: none;
73
- margin-top: 10px;
74
- justify-content: flex-end;
75
- }
76
-
77
- .rightBlock button {
78
- padding: 8px 12px;
79
- font-size: 14px;
80
- }
81
-
82
- .body {
83
- padding: 10px;
84
- }
85
-
86
- .footer {
87
- padding: 10px;
88
- }
89
- }
90
-
91
- @media screen and (max-width: 480px) {
92
- .header {
93
- padding: 8px;
94
- padding-left: 12px;
95
- padding-bottom: 4px;
96
- }
97
-
98
- .rightBlock button {
99
- padding: 6px 10px;
100
- font-size: 12px;
101
- }
102
-
103
- .body {
104
- padding: 8px;
105
- }
106
-
107
- .footer {
108
- padding: 8px;
109
- }
1
+ .container {
2
+ position: relative;
3
+ display: block;
4
+ width: 100%;
5
+ background: #ffff;
6
+ border-radius: 15px;
7
+ }
8
+
9
+ .header {
10
+ position: relative;
11
+ display: block;
12
+ width: 100%;
13
+ padding: 15px;
14
+ padding-left: 20px;
15
+ padding-bottom: 7.5px;
16
+ border-bottom: 1px solid #d0d6de;
17
+ color: #464255;
18
+ }
19
+
20
+ .title {
21
+ margin: 0px !important;
22
+ }
23
+
24
+ .description {
25
+ font-size: 12px;
26
+ }
27
+
28
+ .rightBlock {
29
+ position: absolute;
30
+ right: 15px;
31
+ z-index: 2;
32
+ top: 50%;
33
+ transform: translateY(-50%);
34
+ display: flex;
35
+ flex-direction: row;
36
+ gap: 10px;
37
+ }
38
+
39
+ .rightBlock button {
40
+ display: flex;
41
+ flex-direction: row;
42
+ gap: 10px;
43
+ justify-items: center;
44
+ align-items: center;
45
+ padding: 10px 15px;
46
+ }
47
+
48
+ .body {
49
+ display: block;
50
+ width: 100%;
51
+ padding: 5px;
52
+ }
53
+
54
+ .footer {
55
+ display: block;
56
+ width: 100%;
57
+ padding: 5px;
58
+ border-top: 1px solid #d0d6de;
59
+ }
60
+
61
+ @media screen and (max-width: 768px) {
62
+ .header {
63
+ padding: 10px;
64
+ padding-left: 15px;
65
+ padding-bottom: 5px;
66
+ }
67
+
68
+ .rightBlock {
69
+ position: relative;
70
+ right: auto;
71
+ top: auto;
72
+ transform: none;
73
+ margin-top: 10px;
74
+ justify-content: flex-end;
75
+ }
76
+
77
+ .rightBlock button {
78
+ padding: 8px 12px;
79
+ font-size: 14px;
80
+ }
81
+
82
+ }
83
+
84
+ @media screen and (max-width: 480px) {
85
+ .header {
86
+ padding: 8px;
87
+ padding-left: 12px;
88
+ padding-bottom: 4px;
89
+ }
90
+
91
+ .rightBlock button {
92
+ padding: 6px 10px;
93
+ font-size: 12px;
94
+ }
95
+
110
96
  }