Skip to content

Commit

Permalink
v0.5.0 relase
Browse files Browse the repository at this point in the history
rajeshwarpatlolla committed Mar 29, 2016
1 parent 9b6a004 commit 69f6404
Showing 12 changed files with 345 additions and 334 deletions.
167 changes: 100 additions & 67 deletions README.md
Original file line number Diff line number Diff line change
@@ -2,106 +2,135 @@

##Introduction:

This is a `ionic-timepicker` bower component which can be used with any Ionic framework's application.

[View Demo](http://rajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/ "Demo")
This is an `ionic-timepicker` bower component, which can be used in any Ionic framework's application. No additional plugins are required for this component.
This plugin is completely open source. Please rate this plugin @ [Ionic Market](http://market.ionic.io/plugins/ionictimepicker)

[View Demo](http://rajeshwarpatlolla.github.io/TimePickerForIonicFramework/demo/ "Demo")

##Prerequisites.

1) node.js, npm, ionic, bower and gulp.
* node.js, npm
* ionic
* bower
* gulp

##How to use:

1) In your project repository install the ionic time picker using bower
1) In your project folder, please install this plugin using bower

`bower install ionic-timepicker --save`

2) Give the path of `ionic-timepicker.bundle.min.js` in your `index.html` file.
This will install the latest version of `ionic-timepicker`. If you wish to install any specific version(eg : 0.4.0) then

`bower install ionic-timepicker#0.4.0 --save`

2) Specify the path of `ionic-timepicker.bundle.min.js` in your `index.html` file.

````html
<!-- path to ionic/angularjs js -->
<!-- path to ionic -->
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>
````

3) In your application module inject the dependency `ionic-timepicker`, in order to work with the `ionic-timepicker` component
````

3) In your application's main module, inject the dependency `ionic-timepicker`, in order to work with this plugin
````javascript
angular.module('modulename', ['ionic', 'ionic-timepicker']){

angular.module('mainModuleName', ['ionic', 'ionic-timepicker']){
//
}
````

4) Use the below format in your template's corresponding controller
4) You can configure this time picker at application level in the config method using the `ionicTimePicker` provider.
Your config method may look like this if you wish to setup the configuration. But this is not mandatory step.

````javascript
$scope.timePickerObject = {
inputEpochTime: ((new Date()).getHours() * 60 * 60), //Optional
step: 15, //Optional
format: 12, //Optional
titleLabel: '12-hour Format', //Optional
setLabel: 'Set', //Optional
closeLabel: 'Close', //Optional
setButtonType: 'button-positive', //Optional
closeButtonType: 'button-stable', //Optional
callback: function (val) { //Mandatory
timePickerCallback(val);
}
};
.config(function (ionicTimePickerProvider) {
var timePickerObj = {
inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),
format: 12,
step: 15,
setLabel: 'Set',
closeLabel: 'Close'
};
ionicTimePickerProvider.configTimePicker(timePickerObj);
})
````
In the above code i am not configuring all the properties, but you can configure as many properties as you can.

The properties you can configure are as follows.

**$scope.timePickerObject** is the object, that we need to pass to the directive. The properties of this object are as follows.
**a) inputTime**(Optional) : This is the input epoch time which we can pass to the component. You can give any valid epoch time. Default value is `(((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60))`.

**a) inputEpochTime** (Optional) : This the input epoch time to which the time will set initially. This is mandatory if you wish to show the time on the button, even before opening the popup. Default value is current time.
**b) format**(Optional) : This takes two values 12 or 24. If we give 12 as the value, then it will be `12` format time picker or else if you give `24` as the value, then it will be 24 hour format time picker. Default value is `12`.

**b) step** (Optional) : This the minute increment / decrement step. Default value is `15`
**c) step**(Optional) : This is the value which will be used to increment/decrement the values of the minutes. You can give any value like 10/15/20/30. Default value is `15`.

**c) format** (Optional) : This the format of the time. It can can two values i.e.`12` or `24`. Default value is `24`
**d) setLabel**(Optional) : The label for `Set` button. Default value is `Set`

**d) titleLabel** (Optional) : The `Title` for the popup. Default value is `Time Picker`
**e) closeLabel**(Optional) : The label for `Close` button. Default value is `Close`

**e) setLabel** (Optional) : The label for the `Set` button. Default value is `Set`
5) Inject `ionicTimePicker` in the controller, where you wish to use this component. Then using the below method you can call the timepicker.

**f) closeLabel** (Optional) : The label for the `Close` button. Default value is `Close`
````javascript
.controller('HomeCtrl', function ($scope, ionicTimePicker) {

var ipObj1 = {
callback: function (val) { //Mandatory
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
}
},
inputTime: 50400, //Optional
format: 12, //Optional
step: 15, //Optional
setLabel: 'Set2' //Optional
};

ionicTimePicker.openTimePicker(ipObj1);
};
````

**g) setButtonType** (Optional) : This the type of the `Set` button. Default value is `button-positive`. You can give any valid ionic framework's button classes.
Apart from the config method, you can re configure all options in the controller also. If you again set any of the properties, they will be overridden by the values mentioned in the controller. This will be useful if there are multiple time pickers in the app, which has different properties.

**h) closeButtonType** (Optional) : This the type of the `Close` button. Default value is `button-stable`. You can give any valid ionic framework's button classes.
In all the above steps, only mandatory property is the `callback` where you will get the selected time value.

**i) callback** (Mandatory) : This the callback function, which will get the selected time in to the controller. You can define this function as follows.
````javascript
function timePickerCallback(val) {
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC');
}
}
````

##Screen Shots:

5) Then use the below format in your template / html file
Once you are successfully done with the above steps, you should be able to use this plugin.

````html
<ionic-timepicker input-obj="timePickerObject">
<button class="button button-block button-positive overflowShow">
<standard-time-meridian etime='timePickerObject.inputEpochTime'></standard-time-meridian>
</button>
</ionic-timepicker>
````
The first screen shot shows the popup and the second shows the modal of this plugin.

**a) ionic-timepicker** is the directive, to which we can pass required vales.
### iOS :
<img src="https://lh3.googleusercontent.com/RZmHEf19w3ZozSeIivFYzKfhQAydDPA7xfGgZHzPadYNG32_BpeFnQRin6LTapfzf1asljfxEpV48GpGoU8g1NPOaL-ya10lno1L4Mjefz41FeWCIoW1um5BO1Lu0dRhbgvmUA_C_Q9YiZf6V8MDjAqyNNFkKpdjNDOh3qDPmi1v-XmG9Q-E40G1kdqxDrWMOIF1zhzmpzKaYE35Hp02-eHavfse25J64oyTxoXW1qKFa3yyacPFAs8UkMvJLNjXAryRpVtQwfbkCbac88jgckXAuAeDo7RTMjcT9J0PYufXutT5RlkEr3KMAJqrUSQpoe__iKBSmJCfCcOplVMvRcFUuHq7_4IwJtbqUvWNgL68kgeWsR8HWbBJY5u1uDg3DBuiWWfnKhS1oFu5imjLwfHshsOTT-mjV-VicK_pvcXtaFjkUGdtx436A1JsYN-3QyxqaYHnoedIT1GvKZTiJYNU6_qbUdTfQIZu5s0XPE1ALe56Hhs14zNqcdDYGGa3eyCuyD8qx8LExJZvHtJlJohTJQOUNkSfCKgKItjU6d3LjGpeNmVL9xAKb7UJ9hadqx0Z=w382-h678-no" width="320" height="568" />
<img src="https://lh3.googleusercontent.com/eHFdHG7yAQlVUlARm-i4i0RXje1SBZAAswiYH8-ml-w2nYCPrjQF96qcWpp8ZQwU-Zn4QBkZLJ4kWXGjVJ-kQjTbYvO9KMU4m3LbsA8-iVUPtWbbAHZWSBpaFTmZTvaL4ssCYG1YEZF1tVBHxOkl2Nvunxi4jHjzN1VYLng4fPXc_H2ORGkx93Ns-7rgtaIrbofd36mnUChmkICPMgHa-mitLHe7pBoMQQsWF3IqpFmb8X6NAOHMix5BcGIYMtGYig1iZgY3U1ppPSu6u67sq3b3HKJfAsR12x7CK4uZyUGmv5t3V6O7bKW4qwlqyq9Q7Xw_wJ_RL4YI874daIdLYxnIwv2406Fiz8CvJSHTHyznsBONvPMH58FOjOUjreHemUxGqh3CsaZaNFHPjEV1tQJTYBwe4tlUNbDU3iaJACqyTAMjj93HD-LJDxrbMUBgQKVFshF0i_SCfvid96JiHfiw0t6udFU3V26Gm80FpNb5XRfvsDNNpnY35U0Ei5HMigy2_Tb4LeFppsFjo0oNRW5o_ncGUkjdWl7M-fWNK4G9lljmg8zvPD4AP8QIbU-iWkAx=w382-h678-no" width="320" height="568" />

**b) input-obj** (Mandatory) : This is an object. We have to pass an object as shown above.
### Android :
<img src="https://lh3.googleusercontent.com/E6lLfSOet7X5jNIRfS-OAkbi2783d7lVjc__xkVXa6AgWz-Rhqb0RQF0Zlez_JC4k5FSfGTZerO0fmUjx626fOSBTs78R8wE19U67sHeKss19qHqU5pt84loNyXOHKLa2iNYT9BnN0hrpVQYdg65c9vhQyeqTBmuz79TehSnsh3kj_ZfQb8juLkYkkWPXkAwKu7iErPG0SbHSutX_EiEtu89Hr1YClXQDDb0U_ca_7kBUFei8KVtwce9qAnGvWnZVNq_bzRO9pDGWDhsFv2tZg5986S8MVC0SgmzsBtwCKGkJIth_nGOSR1ezzLTFcIiWJ8mjMi5twYJ1gWgVG7aDl3T3JF0-Z_FI3AVE7R4xY3_1_Z3r6p7UoGGNfq7oi5n3pJobC80m-SfQYf3Am3Db-zy1n-QxuQQrNTsJFmjQ-YeWX9O-0H07xpPgzUVWNk7ybqzHDj9gSAhaUIlZ0P5de0CEVkmse3fDskHcJaUUiuLLg7GRjfeUO80dNTAXPapkbIGqeXR1bVCPoYSYS1BE4gXqVcaF02eZN2AfPr6-XtLmmNa-rvvNVo0-nSG93onkMhi=w382-h678-no" width="360" height="640" />
<img src="https://lh3.googleusercontent.com/d2dRpy0mZ-ivfy48bfXxH8oXQ2w3L21evHZstdTc5Z2z4ukYlSakGAFdnnNJknGx_zRgdUFC5AcTUWO9XyccTc-qzEbnwEq9Kqd6JSH1YKGDhrK0zsx1qGrtn1MNlg2Fa9TUjt_U8SlGQEWin5h8Zqyp93bevDHe_15KS5pXp7WHjpI-eZtWJqUOObnnY5e_54cbx5Rw3Veh25nhYQUyPxIMaHDMr-dUyOKhxVP1dz7keAjD9vqH1XJwX6kkCNSSn-DeZOG6vXqjOgPlv1FQpkG7uEc2Y84bIbBqFcIR5XSIDBppPYpt_tDs20-ZgDLoY7-59mXEnclS9OZlFcTN_SCHsEjQ8NTsXh8jiJWSQsVx0UF2xumCjd8sLLGx3slv2xYv4KuEtzW5fKsgpeEKFheXnwBtLzxwqavlATNe2x3QWLHekR2eFCDpaGhU_m-aCoo-CD-Fpil-VihqhAcJOYBthPdDdgUhahNJHaJaShN1SNj4faoYIUGNboAsmJNcK92448BlH8NUTSWScu3s1tP3W9xd1DDjUlVaNbIyMPpEITNBHAyvzOn5Ddqpa54sPVbJ=w382-h678-no" width="360" height="640" />

[standard-time-meridian](https://github.com/rajeshwarpatlolla/my-angularjs-directives#standard-time-meridian 'standard-time-meridian') is the directive i am using here to show the time in string format instead of the epoch value.
You can also use any of my [directives](https://github.com/rajeshwarpatlolla/my-angularjs-directives) to convert the epoch time to string format.

##CSS Classes:

##Screen Shots:
###popup
<img src="https://lh3.googleusercontent.com/L4aOxCEmBSduhkmWfrsQmA0UU3eD6-fg1VDjy-uU_ck09bspdsz_ytleW2KrzlZCy3jbFOPS_3SBlkp72SKj2DyjHMS5Eh3YRQFxe32EBU8GmufDHSaqFgjfAvqx4eJMfXsJtdfGD9v_eL-x_7fVg2nUjvNppJ3kY0XxxcbYysTxKFfnMaF40oCGXE1Uj8Dknz_mNVdtPAJeVAgVMxsuGH-zgQWVvoD5DMIgZ0unclt8DakU6N_ZBTZsrPdDPWV6yENUkWaUPmc_YsN53Pzw_h_hg-Oi34GvDyqhIEmvANCMuv6tH9NKSCoxra9dfhtjpa8sfEPfBcG5VLNDkTdnbfeqGGkwf1wTA9aYKrul682aDu84qJAA0jFp3wQvIuToAbpjlZa14MDjBh6wccev4zLt9z8sL10OK_7--0tPq-vCNt5ZlVIoHOA5tVt-lltUP9ZC2PzJRs2GhUVz9pXGi0rSmm06-gFZzb3ycH3nAf_VPlYidb9Znq7QGnWnAvaLdfKyWMDYJVtYuIdkjlFy8SfD5vVROFuXZzW9d9IxjrxOXNQ41sWN5j37UufW0TDaAZrL=w382-h678-no" width="360" height="640" />

![12-Hour](https://lh6.googleusercontent.com/-UL18wuskI_A/VNHkGj8tdwI/AAAAAAAADdU/5tBbZcF6_es/w328-h494-no/TimePicker-1.jpg "12-Hour")
![24-Hour](https://lh5.googleusercontent.com/-xgqgH2zRSuA/VNHkGQ6R8cI/AAAAAAAADdQ/5gGJ1nUqmA0/w328-h494-no/TimePicker-2.jpg "24-Hour.")
#### 1) heading
#### 2) time_picker_arrows
#### 3) time_picker_box_text
#### 4) time_picker_colon
#### 5) button_set
#### 6) button_close

You can use the below css class as the main class to customise popup.
####ionic_timepicker_popup

The css class names for the buttons are as follows

a) For `Set` button the class name is `button_set`

b) For `Close` button the class name is `button_close`

##Versions:

@@ -132,18 +161,22 @@ PR : [#54](https://github.com/rajeshwarpatlolla/ionic-timepicker/pull/54),

Few additional enhancements added.

### 8) v0.5.0
#### Features
a) You can configure the ionic-timepicker from the config method.

##License:
[MIT](https://github.com/rajeshwarpatlolla/ionic-timepicker/blob/master/LICENSE.MD "MIT")

##Contact:
gmail : rajeshwar.patlolla@gmail.com
Gmail : rajeshwar.patlolla@gmail.com

github : https://github.com/rajeshwarpatlolla
Github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032
Twitter : https://twitter.com/rajeshwar_9032

facebook : https://www.facebook.com/rajeshwarpatlolla
Facebook : https://www.facebook.com/rajeshwarpatlolla

paypal : rajeshwar.patlolla@gmail.com
Paypal : rajeshwar.patlolla@gmail.com

Rate it or Comment : http://market.ionic.io/plugins/ionictimepicker
Comment or Rate it : http://market.ionic.io/plugins/ionictimepicker
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ionic-timepicker",
"version": "0.4.0",
"version": "0.5.0",
"authors": [
"rajeshwarpatlolla <rajeshwar.patlolla@gmail.com>"
],
2 changes: 1 addition & 1 deletion dist/ionic-timepicker.bundle.min.js
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ionic-timepicker",
"version": "0.4.0",
"version": "0.5.0",
"authors": [
"rajeshwarpatlolla <rajeshwar.patlolla@gmail.com>"
],
29 changes: 0 additions & 29 deletions src/ionic-timepicker-12-hour.html

This file was deleted.

21 changes: 0 additions & 21 deletions src/ionic-timepicker-24-hour.html

This file was deleted.

9 changes: 0 additions & 9 deletions src/ionic-timepicker.app.js

This file was deleted.

194 changes: 0 additions & 194 deletions src/ionic-timepicker.directive.js

This file was deleted.

32 changes: 32 additions & 0 deletions src/ionic-timepicker.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<div class="">
<div class="heading">{{time.hours}} : {{time.minutes}} <span ng-show="time.format == 12">{{time.meridian}}</span></div>
<div class="row" ng-class="{'padding_left_15px':time.format == 12}">
<div class="col col-25" ng-class="{'col-offset-20 col-25':time.format == 24}">
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="increaseHours()">
<i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.hours" class="time_picker_box_text"></div>
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="decreaseHours()">
<i class="icon ion-chevron-down"></i></button>
</div>
<label class="col col-10 time_picker_colon"> : </label>

<div class="col col-25" ng-class="{'col-25':time.format == 24}">
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="increaseMinutes()"><i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.minutes" class="time_picker_box_text"></div>
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="decreaseMinutes()"><i class="icon ion-chevron-down"></i></button>
</div>
<label class="col col-10 time_picker_colon" ng-if="time.format == 12"> : </label>

<div class="col col-25" ng-if="time.format == 12">
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="changeMeridian()"><i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.meridian" class="time_picker_box_text"></div>
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="changeMeridian()"><i class="icon ion-chevron-down"></i></button>
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions src/ionic-timepicker.module.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
angular.module('ionic-timepicker', [
'ionic-timepicker.provider',
//'ionic-timepicker.templates'
]);
153 changes: 153 additions & 0 deletions src/ionic-timepicker.provider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
angular.module('ionic-timepicker.provider', [])

.provider('ionicTimePicker', function () {

var config = {
setLabel: 'Set',
closeLabel: 'Close',
inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),
format: 12,
step: 15
};

this.configTimePicker = function (inputObj) {
angular.extend(config, inputObj);
};

this.$get = ['$rootScope', '$ionicPopup', function ($rootScope, $ionicPopup) {

var provider = {};
var $scope = $rootScope.$new();
$scope.today = resetHMSM(new Date()).getTime();
$scope.time = {};

//Reset the hours, minutes, seconds and milli seconds
function resetHMSM(currentDate) {
currentDate.setHours(0);
currentDate.setMinutes(0);
currentDate.setSeconds(0);
currentDate.setMilliseconds(0);
return currentDate;
}


//Increasing the hours
$scope.increaseHours = function () {
$scope.time.hours = Number($scope.time.hours);
if ($scope.mainObj.format == 12) {
if ($scope.time.hours != 12) {
$scope.time.hours += 1;
} else {
$scope.time.hours = 1;
}
}
if ($scope.mainObj.format == 24) {
$scope.time.hours = ($scope.time.hours + 1) % 24;
}
$scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours;
};

//Decreasing the hours
$scope.decreaseHours = function () {
$scope.time.hours = Number($scope.time.hours);
if ($scope.mainObj.format == 12) {
if ($scope.time.hours > 1) {
$scope.time.hours -= 1;
} else {
$scope.time.hours = 12;
}
}
if ($scope.mainObj.format == 24) {
$scope.time.hours = ($scope.time.hours + 23) % 24;
}
$scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours;
};

//Increasing the minutes
$scope.increaseMinutes = function () {
$scope.time.minutes = Number($scope.time.minutes);
$scope.time.minutes = ($scope.time.minutes + $scope.mainObj.step) % 60;
$scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes;
};

//Decreasing the minutes
$scope.decreaseMinutes = function () {
$scope.time.minutes = Number($scope.time.minutes);
$scope.time.minutes = ($scope.time.minutes + (60 - $scope.mainObj.step)) % 60;
$scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes;
};

//Changing the meridian
$scope.changeMeridian = function () {
$scope.time.meridian = ($scope.time.meridian === "AM") ? "PM" : "AM";
};

function setMinSecs(ipTime, format) {
$scope.time.hours = ipTime / (60 * 60);

var rem = ipTime % (60 * 60);
if (format == 12) {
if ($scope.time.hours > 12) {
$scope.time.hours -= 12;
$scope.time.meridian = 'PM';
} else {
$scope.time.meridian = 'AM';
}
}
$scope.time.minutes = rem / 60;

$scope.time.hours = $scope.time.hours.toFixed(0);
$scope.time.minutes = $scope.time.minutes.toFixed(0);

if ($scope.time.hours.toString().length == 1) {
$scope.time.hours = '0' + $scope.time.hours;
}
if ($scope.time.minutes.toString().length == 1) {
$scope.time.minutes = '0' + $scope.time.minutes;
}
$scope.time.format = $scope.mainObj.format;
}

provider.openTimePicker = function (ipObj) {
var buttons = [];
$scope.mainObj = angular.extend({}, config, ipObj);
setMinSecs($scope.mainObj.inputTime, $scope.mainObj.format);

buttons.push({
text: $scope.mainObj.setLabel,
type: 'button_set',
onTap: function (e) {
var totalSec = 0;

if ($scope.time.format == 12) {
if ($scope.time.meridian == 'PM') {
$scope.time.hours = Number($scope.time.hours);
$scope.time.hours += 12;
}
totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60);
} else {
totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60);
}
$scope.mainObj.callback(totalSec);
}
});

buttons.push({
text: $scope.mainObj.closeLabel,
type: 'button_close'
});

$scope.popup = $ionicPopup.show({
templateUrl: 'ionic-timepicker.html',
scope: $scope,
cssClass: 'ionic_timepicker_popup',
buttons: buttons
});

};

return provider;

}];

});
64 changes: 53 additions & 11 deletions src/ionic-timepicker.styles.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,65 @@
/* Empty. Add your own CSS if you like */

.timePickerColon {
padding-top: 40px;
/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.
For example, you might change some of the default colors:
*/
.ionic_timepicker_popup .font_28px {
font-size: 28px;
}
.ionic_timepicker_popup .margin_zero {
margin: 0;
}
.ionic_timepicker_popup .padding_zero {
padding: 0;
}
.ionic_timepicker_popup .popup {
background-color: #ffffff;
}
.ionic_timepicker_popup .popup-head {
display: none;
}
.ionic_timepicker_popup .popup-body {
padding: 0;
}
.ionic_timepicker_popup .popup-buttons {
padding: 0;
min-height: 44px;
height: 44px;
}
.ionic_timepicker_popup .popup-buttons .button:not(:last-child) {
margin-right: 1px;
}
.ionic_timepicker_popup .padding_left_15px {
padding-left: 15px;
}
.ionic_timepicker_popup .heading {
height: 44px;
background-color: #009688;
color: #ffffff;
text-align: center;
line-height: 44px;
font-size: 18px;
font-weight: bold;
}
.ionic_timepicker_popup .time_picker_colon {
padding-top: 45px;
text-align: center;
font-weight: bold;
}

.timePickerArrows {
.ionic_timepicker_popup .time_picker_arrows {
width: 100%;
}

.timePickerBoxText {
.ionic_timepicker_popup .time_picker_box_text {
height: 40px;
text-align: center;
border: 1px solid #dddddd;
font-size: 16px;
padding-top: 5px;
line-height: 38px;
}

.overflowShow {
.ionic_timepicker_popup .overflowShow {
white-space: normal !important;
}
.ionic_timepicker_popup .button_set, .ionic_timepicker_popup .button_close {
background-color: #009688;
color: #ffffff;
}

0 comments on commit 69f6404

Please sign in to comment.