feat(datepicker): extract inline styles to stylesheet

- Move inline styles to stylesheet Closes #5215
angular-ui · Jan 12, 2016 · 6843ab6 · 6843ab6
1 parent 3bacd45
commit 6843ab6
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/src/datepicker/datepicker.css b/src/datepicker/datepicker.css
@@ -0,0 +1,15 @@
+.uib-datepicker .uib-title {
+  width: 100%;
+}
+
+.uib-day button, .uib-month button, .uib-year button {
+  min-width: 100%;
+}
+
+.uib-datepicker-popup {
+  display: block;
+}
+
+.uib-button-bar {
+  padding: 10px 9px 2px;
+}
diff --git a/template/datepicker/day.html b/template/datepicker/day.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
+      <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>
       <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
     <tr>
@@ -16,7 +16,7 @@
       <td ng-repeat="dt in row" class="uib-day text-center" role="gridcell"
         id="{{::dt.uid}}"
         ng-class="::dt.customClass">
-        <button type="button" style="min-width:100%;" class="btn btn-default btn-sm"
+        <button type="button" class="btn btn-default btn-sm"
           uib-is-class="
             'btn-info' for selectedDt,
             'active' for activeDt

diff --git a/template/datepicker/month.html b/template/datepicker/month.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
+      <th><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>
       <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
   </thead>
@@ -11,7 +11,7 @@
       <td ng-repeat="dt in row" class="uib-month text-center" role="gridcell"
         id="{{::dt.uid}}"
         ng-class="::dt.customClass">
-        <button type="button" style="min-width:100%;" class="btn btn-default"
+        <button type="button" class="btn btn-default"
           uib-is-class="
             'btn-info' for selectedDt,
             'active' for activeDt

diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
@@ -1,6 +1,6 @@
-<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
+<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
 	<li ng-transclude></li>
-	<li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
+	<li ng-if="showButtonBar" class="uib-button-bar">
 		<span class="btn-group pull-left">
 			<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
 			<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>

diff --git a/template/datepicker/year.html b/template/datepicker/year.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th colspan="{{::columns - 2}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
+      <th colspan="{{::columns - 2}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>
       <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
   </thead>
@@ -11,7 +11,7 @@
       <td ng-repeat="dt in row" class="uib-year text-center" role="gridcell"
         id="{{::dt.uid}}"
         ng-class="::dt.customClass">
-        <button type="button" style="min-width:100%;" class="btn btn-default"
+        <button type="button" class="btn btn-default"
           uib-is-class="
             'btn-info' for selectedDt,
             'active' for activeDt