Skip to content

Commit 005a596

Browse files
author
Joseph
committed
- Converted CSS sizes to absolute as part of migration.
- Completed basic migration, parts still using jQuery.
1 parent 41d866a commit 005a596

File tree

4 files changed

+321
-2
lines changed

4 files changed

+321
-2
lines changed

‎css/material-datetimepicker.px.css

+283
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
md-dialog.dtp {
2+
font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;;
3+
font-size: 14px;
4+
line-height: 1.42857143;
5+
color: #333;
6+
background-color: #fff;
7+
}
8+
9+
/*html {*/
10+
/*font-size: 10px;*/
11+
/*}*/
12+
13+
.dtp table {
14+
border-spacing: 0;
15+
border-collapse: collapse;
16+
width: 100%;
17+
}
18+
19+
.dtp .table > tbody > tr > td,
20+
.dtp .table > tbody > tr > th,
21+
.dtp .table > tfoot > tr > td,
22+
.dtp .table > tfoot > tr > th,
23+
.dtp .table > thead > tr > td,
24+
.dtp .table > thead > tr > th {
25+
padding: 8px;
26+
line-height: 1.42857143;
27+
vertical-align: top;
28+
border-top: 1px solid #ddd;
29+
}
30+
31+
.dtp, .dtp * {
32+
box-sizing: border-box !important;
33+
}
34+
35+
.dtp > .dtp-content {
36+
max-width: 300px;
37+
max-height: 500px;
38+
}
39+
40+
.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
41+
background: #689F38;
42+
color: #fff;
43+
text-align: center;
44+
padding: 3px;
45+
}
46+
47+
.dtp div.dtp-date, .dtp div.dtp-time {
48+
background: #8BC34A;
49+
text-align: center;
50+
color: #fff;
51+
padding: 10px;
52+
}
53+
54+
.dtp div.dtp-date > div {
55+
padding: 0;
56+
margin: 0;
57+
}
58+
59+
.dtp div.dtp-actual-month {
60+
font-size: 1.5em;
61+
}
62+
63+
.dtp div.dtp-actual-num {
64+
font-size: 3em;
65+
line-height: 0.9;
66+
}
67+
68+
.dtp div.dtp-actual-maxtime {
69+
font-size: 3em;
70+
line-height: 0.9;
71+
}
72+
73+
.dtp div.dtp-actual-year {
74+
font-size: 1.5em;
75+
color: #DCEDC8;
76+
}
77+
78+
.dtp div.dtp-picker {
79+
padding: 10px;
80+
text-align: center;
81+
}
82+
83+
.dtp div.dtp-picker-month, .dtp div.dtp-actual-time {
84+
font-weight: 500;
85+
text-align: center;
86+
}
87+
88+
.dtp .dtp-close {
89+
position: absolute;
90+
top: 0.5em;
91+
right: 10px;
92+
}
93+
94+
.dtp .dtp-close > a {
95+
color: #fff;
96+
}
97+
98+
.dtp .dtp-close > a > i {
99+
font-size: 1em;
100+
}
101+
102+
.dtp table.dtp-picker-days {
103+
margin: 0;
104+
min-height: 251px;
105+
}
106+
107+
.dtp table.dtp-picker-days, .dtp table.dtp-picker-days tr, .dtp table.dtp-picker-days tr > td {
108+
border: none;
109+
}
110+
111+
.dtp table.dtp-picker-days tr > td {
112+
font-weight: 700;
113+
font-size: 12px;
114+
text-align: center;
115+
padding: 10px 3px;
116+
}
117+
118+
.dtp table.dtp-picker-days tr > td > span.dtp-select-day {
119+
color: #BDBDBD !important;
120+
}
121+
122+
.dtp table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a {
123+
color: #212121;
124+
text-decoration: none;
125+
padding: 4px 5px 5px 6px;
126+
border-radius: 50% !important;
127+
}
128+
129+
.dtp table.dtp-picker-days tr > td > a.selected {
130+
background: #8BC34A;
131+
color: #fff;
132+
}
133+
134+
.dtp table.dtp-picker-days tr > th {
135+
color: #757575;
136+
text-align: center;
137+
font-weight: 700;
138+
padding: 4px 3px;
139+
}
140+
141+
.dtp .p10 > a {
142+
color: #689F38;
143+
text-decoration: none;
144+
}
145+
146+
.dtp .p10 {
147+
width: 10%;
148+
display: inline-block;
149+
}
150+
151+
.dtp .p20 {
152+
width: 20%;
153+
display: inline-block;
154+
}
155+
156+
.dtp .p60 {
157+
width: 60%;
158+
display: inline-block;
159+
}
160+
161+
.dtp .p80 {
162+
width: 80%;
163+
display: inline-block;
164+
}
165+
166+
.dtp a.dtp-meridien-am, .dtp a.dtp-meridien-pm {
167+
position: relative;
168+
top: 10px;
169+
color: #212121;
170+
font-weight: 500;
171+
padding: 7px 5px;
172+
border-radius: 50% !important;
173+
text-decoration: none;
174+
background: #eee;
175+
font-size: 10px;
176+
}
177+
178+
.dtp .dtp-actual-meridien a.selected {
179+
background: #689F38;
180+
color: #fff;
181+
}
182+
183+
.dtp .dtp-picker-time > a {
184+
display: block;
185+
line-height: 23px;
186+
padding: 3px 3px 3px 3px;
187+
}
188+
189+
.dtp .dtp-picker-time {
190+
position: absolute;
191+
width: 30px;
192+
height: 30px;
193+
font-size: 1em;
194+
border-radius: 50%;
195+
cursor: pointer;
196+
font-weight: 500;
197+
text-align: center !important;
198+
}
199+
200+
.dtp .dtp-picker-time > a.dtp-select-hour.selected {
201+
background: #689F38;
202+
color: #fff;
203+
}
204+
205+
.dtp .dtp-picker-time > a.dtp-select-hour.disabled, .dtp .dtp-picker-time > a.dtp-select-minute.disabled {
206+
color: #757575;
207+
}
208+
209+
.dtp .dtp-picker-time > a.dtp-select-minute.selected {
210+
background: #8BC34A;
211+
color: #fff;
212+
}
213+
214+
.dtp div.dtp-picker-clock {
215+
margin: 10px 20px 0 20px;
216+
padding: 10px;
217+
border-radius: 50% !important;
218+
background: #eee;
219+
}
220+
221+
.dtp-clock-center {
222+
width: 15px;
223+
height: 15px;
224+
background: #757575;
225+
border-radius: 50%;
226+
position: absolute;
227+
z-index: 50;
228+
}
229+
230+
.dtp .dtp-hand, .dtp .dtp-hour-hand {
231+
position: absolute;
232+
width: 4px;
233+
margin-left: -2px;
234+
background: #BDBDBD;
235+
-moz-transform: rotate(0deg);
236+
-ms-transform: rotate(0deg);
237+
-webkit-transform: rotate(0deg);
238+
transform: rotate(0deg);
239+
-moz-transform-origin: bottom;
240+
-ms-transform-origin: bottom;
241+
-webkit-transform-origin: bottom;
242+
transform-origin: bottom;
243+
z-index: 1;
244+
}
245+
246+
.dtp .dtp-minute-hand {
247+
width: 2px;
248+
margin-left: -1px;
249+
}
250+
251+
.dtp .dtp-hand.on {
252+
background: #8BC34A;
253+
}
254+
255+
.dtp .dtp-buttons {
256+
padding: 0 10px 10px 10px;
257+
text-align: right;
258+
}
259+
260+
.dtp.hidden, .dtp .hidden {
261+
display: none;
262+
}
263+
264+
.dtp .invisible {
265+
visibility: hidden;
266+
}
267+
268+
.dtp .left {
269+
float: left;
270+
}
271+
272+
.dtp .right {
273+
float: right;
274+
}
275+
276+
.dtp .clearfix {
277+
clear: both;
278+
}
279+
280+
.dtp .center {
281+
text-align: center;
282+
}
283+

‎index2.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1111
<link href="bower_components/angular-material/angular-material.min.css" rel="stylesheet" type="text/css"/>
12-
<link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css"/>
12+
<link rel="stylesheet" href="./css/material-datetimepicker.px.css" type="text/css"/>
1313

1414
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
1515
<!--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>-->

‎js/angular-material-datetimepicker.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
+ ' <header class="dtp-header">'
1313
+ ' <div class="dtp-actual-day">{{date.day}}</div>'
1414
+ ' <div class="dtp-close text-right">'
15-
+ ' <md-button ng-click="picker.hide()"><i class="material-icons">clear</i></md-button>'
15+
+ ' <a href="#" ng-click="picker.hide()"><i class="material-icons">clear</i></a>'
1616
+ ' </div>'
1717
+ ' </header>'
1818
+ ' <div class="dtp-date hidden">'

‎remtopx.php

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
/**
4+
* Here's a simple PHP file that converts CSS with REM measurements to PX
5+
*/
6+
7+
error_reporting(E_ALL & ~E_NOTICE);
8+
function console_log()
9+
{
10+
echo "[", date('Y-m-d H:i:s'), "]\t", join(' ', func_get_args()), PHP_EOL;
11+
}
12+
13+
$file = isset($argv[1]) ? $argv[1] : '';
14+
15+
if (!$file || !file_exists($file)) {
16+
die('First argument must be specified and must be a file that exists.' . PHP_EOL);
17+
}
18+
$tmp = explode('.', $file);
19+
$ext = array_pop($tmp);
20+
console_log('processing file', $file);
21+
$outfile = isset($argv[2]) ? $argv[1] : (dirname($file) . DIRECTORY_SEPARATOR . basename($file, $ext) . 'px.' . $ext);
22+
console_log('Output file is : ', $outfile);
23+
$content = file_get_contents($file);
24+
console_log('file length: ', strlen($content));
25+
26+
$rootSize = intval(isset($argv[2]) ? $argv[2] : 0) ?: 10;
27+
console_log('Root size:', $rootSize, 'px');
28+
29+
$replaced = 0;
30+
$newContent = preg_replace_callback('/(\d*(\.?\d+))?\s*rem/', function ($matches) use ($rootSize) {
31+
return (floatval($matches[1]) * $rootSize) . 'px';
32+
}, $content, -1, $replaced);
33+
34+
console_log('Replaced:', $replaced, 'items');
35+
file_put_contents($outfile, $newContent);
36+
console_log('Written to output file, new size: ', filesize($outfile));

0 commit comments

Comments
 (0)