@@ -47,38 +47,33 @@ const checkboxFilter = {
4747 type: ' CheckBox'
4848}
4949const load = function () {
50- grid .value .adaptiveDlgTarget = document .getElementsByClassName (' e-mobile-content' 0 ];
50+ grid .value .ej2Instances . adaptiveDlgTarget = document .getElementsByClassName (' e-mobile-content' 0 ];
5151}
5252provide (' grid'
53- script >
53+ script >
5454<style >
55- @import " ../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"
56-
57- .e-grid .custom {
58- background-color #f48fb1 !important ;
59- /* csslint allow: important */
60- color white ;
61- }
62-
63- .e-grid .custom {
64- background-color #fce4ec ;
65- color white ;
66- }
67-
68- /* The device with borders */
55+ @import " ../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css"
56+ @import " ../node_modules/@syncfusion/ej2-base/styles/tailwind.css"
57+ @import " ../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css"
58+ @import " ../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css"
59+ @import " ../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css"
60+ @import " ../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css"
61+ @import " ../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css"
62+ @import " ../node_modules/@syncfusion/ej2-popups/styles/tailwind.css"
63+ @import " ../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css"
64+ /* Mobile Layout Styles */
6965.e-mobile-layout {
7066 position relative ;
7167 width 360px ;
7268 height 640px ;
7369 margin auto ;
74- border 16px #f4f4f4 solid ;
70+ border 16px solid #f4f4f4 ;
7571 border-top-width 60px ;
7672 border-bottom-width 60px ;
7773 border-radius 36px ;
78- box-shadow 0 0px 2px rgb (144 144 144 ), 0 0px 10px rgb (0 0 0 / 16% );
74+ box-shadow 0 0px 2px rgb (144 , 144 , 144 ), 0 0px 10px rgb (0 , 0 , 0 / 16% );
7975}
8076
81- /* The horizontal line on the top of the device */
8277.e-mobile-layout :before {
8378 content ' '
8479 display block ;
@@ -92,7 +87,6 @@ provide('grid', [Filter, Sort, Edit, Toolbar, Page]);
9287 border-radius 10px ;
9388}
9489
95- /* The circle on the bottom of the device */
9690.e-mobile-layout :after {
9791 content ' '
9892 display block ;
@@ -106,110 +100,82 @@ provide('grid', [Filter, Sort, Edit, Toolbar, Page]);
106100 border-radius 50% ;
107101}
108102
109- /* The screen (or content) of the device */
110103.e-mobile-layout .e-mobile-content {
111104 overflow-x hidden ;
112105 height 100% ;
113106 background white ;
114107 border 0px solid #dddddd ;
115108}
116109
117- .highcontrast .e-mobile-layout {
118- border 16px #000000 solid ;
119- border-top-width 60px ;
120- border-bottom-width 60px ;
121- box-shadow -1px 2px white , -2px -2px white , 2px -2px white , 2px 1px white ;
110+ /* Adaptive Pager Styles */
111+ .e-adaptive-demo .e-pager {
112+ padding 13px 0 ;
113+ }
114+
115+ .e-adaptive-demo .e-pager div .e-parentmsgbar {
116+ box-sizing border-box ;
117+ display inline-block ;
118+ padding 0 ;
119+ text-align center ;
120+ vertical-align top ;
121+ width calc (60% - 48px );
122+ }
123+
124+ .e-adaptive-demo .e-pager .e-pagesizes ,
125+ .e-adaptive-demo .e-pager .e-pagecountmsg ,
126+ .e-adaptive-demo .e-pager .e-pagercontainer {
127+ display none ;
128+ }
129+
130+ .e-adaptive-demo .e-pager .e-icons {
131+ font-size 11px ;
132+ }
133+
134+ .e-adaptive-demo .e-pager .e-mfirst ,
135+ .e-adaptive-demo .e-pager .e-mprev ,
136+ .e-adaptive-demo .e-pager .e-mnext ,
137+ .e-adaptive-demo .e-pager .e-mlast {
138+ border 0 ;
139+ box-sizing border-box ;
140+ display inline-block ;
141+ padding 1% 5% ;
142+ }
143+
144+ .e-adaptive-demo .e-pager .e-mfirst {
145+ margin-right 4px ;
146+ text-align right ;
147+ width calc (10% + 11px );
148+ }
149+
150+ .e-adaptive-demo .e-pager .e-mprev {
151+ margin 0 4px ;
152+ text-align right ;
153+ width 10% ;
154+ }
155+
156+ .e-adaptive-demo .e-pager .e-mnext {
157+ margin 0 4px ;
158+ text-align left ;
159+ width 10% ;
122160}
123161
162+ .e-adaptive-demo .e-pager .e-mlast {
163+ margin-left 4px ;
164+ text-align left ;
165+ width calc (10% + 11px );
166+ }
167+
168+ .e-adaptive-demo .e-bigger .e-pager {
169+ padding 19px 0 ;
170+ }
171+
172+ /* Responsive Dialog */
124173.e-responsive-dialog {
125174 box-shadow none ;
126175 border 1px solid #dddddd ;
127176}
128177
129- /* Render the mobile pager by default */
130- @media (max-width : 3840px ) {
131- .e-adaptive-demo .e-pager {
132- padding 13px 0 ;
133- }
134-
135- .e-adaptive-demo .e-pager div .e-parentmsgbar {
136- box-sizing border-box ;
137- display inline-block ;
138- float initial ;
139- padding-bottom 0 ;
140- padding-right 0 ;
141- padding-top 0 ;
142- text-align center ;
143- vertical-align top ;
144- width calc (60% - 48px );
145- }
146-
147- .e-adaptive-demo .e-pager .e-pagesizes {
148- display none ;
149- }
150-
151- .e-adaptive-demo .e-pager .e-pagecountmsg {
152- display none ;
153- }
154-
155- .e-adaptive-demo .e-pager .e-pagercontainer {
156- display none ;
157- }
158-
159- .e-adaptive-demo .e-pager .e-icons {
160- font-size 11px ;
161- }
162-
163- .e-adaptive-demo .e-pager .e-mfirst ,
164- .e-adaptive-demo .e-pager .e-mprev ,
165- .e-adaptive-demo .e-pager .e-mnext ,
166- .e-adaptive-demo .e-pager .e-mlast {
167- border 0 ;
168- box-sizing border-box ;
169- display inline-block ;
170- padding 1% 5% ;
171- }
172-
173- .e-adaptive-demo .e-pager .e-mfirst {
174- margin-right 4px ;
175- text-align right ;
176- width calc (10% + 11px );
177- }
178-
179- .e-adaptive-demo .e-pager .e-mprev {
180- margin 0 4px ;
181- text-align right ;
182- width 10% ;
183- }
184-
185- .e-adaptive-demo .e-pager .e-mnext {
186- margin 0 4px ;
187- text-align left ;
188- width 10% ;
189- }
190-
191- .e-adaptive-demo .e-pager .e-mlast {
192- margin-left 4px ;
193- text-align left ;
194- width calc (10% + 11px );
195- }
196-
197- .e-adaptive-demo .e-bigger .e-pager ,
198- .e-adaptive-demo .e-pager.e-bigger {
199- padding 19px 0 ;
200- }
201-
202- .e-adaptive-demo .e-bigger .e-pager.e-rtl div .e-parentmsgbar ,
203- .e-adaptive-demo .e-pager.e-bigger.e-rtl div .e-parentmsgbar {
204- margin-right 0 ;
205- }
206-
207- .e-adaptive-demo .e-bigger .e-pager div .e-parentmsgbar ,
208- .e-adaptive-demo .e-pager.e-bigger div .e-parentmsgbar {
209- padding 0 ;
210- }
211- }
212-
213178.e-dlg-target.e-scroll-disabled {
214179 overflow auto !important ;
215- } </style >
180+ }
181+ style >
0 commit comments