px-react-ui-components 1.1.16 → 1.1.17

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,110 +1,110 @@
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: 500px; /* Daha geniş cihazlarda %90 genişlik */
34
- padding: 20px;
35
- text-align: left;
36
- background: #fff;
37
- border-radius: 10px;
38
- box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
39
- color: #666;
40
- text-align: center;
41
- margin: 0 auto; /* Orta hizalama */
42
- }
43
-
44
- @media (max-width: 600px) {
45
- .react-confirm-alert-body {
46
- width: 370px; /* Küçük ekranlarda daha fazla boşluk */
47
- }
48
- }
49
-
50
- .react-confirm-alert-svg {
51
- position: absolute;
52
- top: 0;
53
- left: 0;
54
- }
55
-
56
- .react-confirm-alert-body > h1 {
57
- margin-top: 0;
58
- color: #1e293b !important;
59
- font-weight: bold;
60
- font-size: 1.3em;
61
- border-radius: 0px;
62
- }
63
-
64
- .react-confirm-alert-body > h3 {
65
- margin: 0;
66
- font-size: 3.5em !important;
67
- color: #1e293b !important;
68
- }
69
-
70
- .react-confirm-alert-button-group {
71
- display: -webkit-flex;
72
- display: -moz-flex;
73
- display: -ms-flex;
74
- display: -o-flex;
75
- display: flex;
76
- justify-content: space-between;
77
- margin-top: 15px !important;
78
- }
79
-
80
- .react-confirm-alert-button-group > button {
81
- outline: none;
82
- background: #1e293b;
83
- border: none;
84
- display: inline-block;
85
- padding: 10px 18px;
86
- color: #fff;
87
- margin-right: 10px;
88
- border-radius: 5px;
89
- font-size: 1em;
90
- cursor: pointer;
91
- width: 100%;
92
-
93
- &:hover {
94
- opacity: 0.8;
95
- }
96
-
97
- &:last-child {
98
- background: #506280 !important;
99
- color: #fff;
100
- }
101
- &:first-child {
102
- background: #1e293b !important;
103
- color: #fff;
104
- }
105
- }
106
-
107
- .react-confirm-alert-body > div {
108
- max-height: 250px !important;
109
- 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: 500px; /* Daha geniş cihazlarda %90 genişlik */
34
+ padding: 20px;
35
+ text-align: left;
36
+ background: #fff;
37
+ border-radius: 10px;
38
+ box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
39
+ color: #666;
40
+ text-align: center;
41
+ margin: 0 auto; /* Orta hizalama */
42
+ }
43
+
44
+ @media (max-width: 600px) {
45
+ .react-confirm-alert-body {
46
+ width: 370px; /* Küçük ekranlarda daha fazla boşluk */
47
+ }
48
+ }
49
+
50
+ .react-confirm-alert-svg {
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+ }
55
+
56
+ .react-confirm-alert-body > h1 {
57
+ margin-top: 0;
58
+ color: #1e293b !important;
59
+ font-weight: bold;
60
+ font-size: 1.3em;
61
+ border-radius: 0px;
62
+ }
63
+
64
+ .react-confirm-alert-body > h3 {
65
+ margin: 0;
66
+ font-size: 3.5em !important;
67
+ color: #1e293b !important;
68
+ }
69
+
70
+ .react-confirm-alert-button-group {
71
+ display: -webkit-flex;
72
+ display: -moz-flex;
73
+ display: -ms-flex;
74
+ display: -o-flex;
75
+ display: flex;
76
+ justify-content: space-between;
77
+ margin-top: 15px !important;
78
+ }
79
+
80
+ .react-confirm-alert-button-group > button {
81
+ outline: none;
82
+ background: #1e293b;
83
+ border: none;
84
+ display: inline-block;
85
+ padding: 10px 18px;
86
+ color: #fff;
87
+ margin-right: 10px;
88
+ border-radius: 5px;
89
+ font-size: 1em;
90
+ cursor: pointer;
91
+ width: 100%;
92
+
93
+ &:hover {
94
+ opacity: 0.8;
95
+ }
96
+
97
+ &:last-child {
98
+ background: #506280 !important;
99
+ color: #fff;
100
+ }
101
+ &:first-child {
102
+ background: #1e293b !important;
103
+ color: #fff;
104
+ }
105
+ }
106
+
107
+ .react-confirm-alert-body > div {
108
+ max-height: 250px !important;
109
+ overflow: auto;
110
110
  }
@@ -1,96 +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: 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
-
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
+
96
96
  }