Ionic default styles

Hobbule · Sep 7, 2016 · 6d4a57c · 6d4a57c
1 parent 9f5076d
commit 6d4a57c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 61 deletions.
diff --git a/dist/ionic-timepicker.bundle.min.js b/dist/ionic-timepicker.bundle.min.js
diff --git a/src/ionic-timepicker.html b/src/ionic-timepicker.html
@@ -1,32 +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="popup-head">
+  <h3 class="popup-title">{{time.hours}} : {{time.minutes}} <span ng-show="time.format == 12">{{time.meridian}}</span></h3>
+</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-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 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>
diff --git a/src/ionic-timepicker.module.js b/src/ionic-timepicker.module.js
@@ -1,4 +1,4 @@
 angular.module('ionic-timepicker', [
   'ionic-timepicker.provider',
-  //'ionic-timepicker.templates'
+  'ionic-timepicker.templates'
 ]);
diff --git a/src/ionic-timepicker.provider.js b/src/ionic-timepicker.provider.js
@@ -122,9 +122,14 @@ angular.module('ionic-timepicker.provider', [])
         $scope.mainObj = angular.extend({}, config, ipObj);
         setMinSecs($scope.mainObj.inputTime, $scope.mainObj.format);
 
+        buttons.push({
+          text: $scope.mainObj.closeLabel,
+          type: 'button_close'
+        });
+
         buttons.push({
           text: $scope.mainObj.setLabel,
-          type: 'button_set',
+          type: 'button_set button-positive',
           onTap: function (e) {
             var totalSec = 0;
 
@@ -143,11 +148,6 @@ angular.module('ionic-timepicker.provider', [])
           }
         });
 
-        buttons.push({
-          text: $scope.mainObj.closeLabel,
-          type: 'button_close'
-        });
-
         $scope.popup = $ionicPopup.show({
           templateUrl: 'ionic-timepicker.html',
           scope: $scope,

diff --git a/src/ionic-timepicker.styles.css b/src/ionic-timepicker.styles.css
@@ -12,35 +12,15 @@ For example, you might change some of the default colors:
 .ionic_timepicker_popup .padding_zero {
   padding: 0;
 }
-.ionic_timepicker_popup .popup {
-  background-color: #ffffff;
-}
-.ionic_timepicker_popup .popup-head {
+.ionic_timepicker_popup .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;
@@ -59,7 +39,3 @@ For example, you might change some of the default colors:
 .ionic_timepicker_popup .overflowShow {
   white-space: normal !important;
 }
-.ionic_timepicker_popup .button_set, .ionic_timepicker_popup .button_close {
-  background-color: #009688;
-  color: #ffffff;
-}