/CSS/jquery.mobile.datebox.css

https://github.com/AndresMartinez/MIU_Andres_Martinez_Project_4 · CSS · 77 lines · 57 code · 11 blank · 9 comment · 0 complexity · 69ab242801eaaee3699b2d6688602a4c MD5 · raw file 

    

  1. /* jQuery-Mobile-DateBox Plugin
    2. 

  2.  * contains all plugin styles
    3. 

  3.  */
    4. 

  4.  
    5. 

  5. /* Base input element Styles */
    6. 

  6. 

  7. .ui-input-datebox {
    8. 

  8.         width: 95%;
    9. 

  9. 	background-image: -webkit-gradient(linear, left top, left bottom, from(#5f9cc5), to(#396b9e)); /* Saf4+, Chrome */
    10. 

  10. 	background-image: -webkit-linear-gradient(top, #5f9cc5, #396b9e); /* Chrome 10+, Saf5.1+ */
    11. 

  11. 	background-image:    -moz-linear-gradient(top, #5f9cc5, #396b9e); /* FF3.6 */
    12. 

  12. 	background-image:     -ms-linear-gradient(top, #5f9cc5, #396b9e); /* IE10 */
    13. 

  13.         padding: .4em;
    14. 

  14.         line-height: 1.4;
    15. 

  15.         font-size: 16px;
    16. 

  16.         display: block;
    17. 

  17.         width: 60%;
    18. 

  18.         padding-top: 0px;
    19. 

  19.         padding-bottom: 0px;
    20. 

  20.         padding-right: .4em; }
    21. 

  21. .ui-input-datebox input { width: 70% !important; border: 1px solid transparent !important; vertical-align: middle; display: inline-block !important; background-color: grey; opacity:0.6; zoom: 1; *display: inline; }
    22. 

  22. .ui-input-datebox input:focus { outline: none;color:white;}
    23. 

  23. .min-width-480px .ui-input-datebox { width: 60%; display: inline-block; zoom:1; *display: inline; }
    24. 

  24. 

  25. /* Calendar Mode Styles */
    26. 

  26. 

  27. .ui-datebox-gridheader { text-align: center; }
    28. 

  28. .ui-datebox-gridheader h4 { text-align: center; display: inline-block; margin-top: 10px; margin-bottom: 10px; zoom:1; *display: inline;}
    29. 

  29. .ui-datebox-gridplus { float: right; }
    30. 

  30. .ui-datebox-gridminus { float: left; }
    31. 

  31. .ui-datebox-gridrow { margin-left: 5px; margin-right: 5px; }
    32. 

  32. .ui-datebox-grid { clear: both; margin-bottom: 5px; }
    33. 

  33. .ui-datebox-griddate { width: 36px; height: 30px; display: inline-block; vertical-align: middle; text-align: center; line-height: 30px; font-weight: bold; font-size: 12px; zoom:1; *display: inline;}
    34. 

  34. .ui-datebox-griddate-empty { border: 1px solid transparent; color: #888; }
    35. 

  35. .ui-datebox-griddate-label { height: 15px !important; line-height: 15px !important; color: black;}
    36. 

  36. 

  37. /* Android Mode Styles */
    38. 

  38. 

  39. .ui-datebox-header h4 { margin-top: 5px; margin-bottom: 5px; text-align: center; }
    40. 

  40. .ui-datebox-controls { text-align: center; }
    41. 

  41. .ui-datebox-controls div { width: 77px; text-align: center; display: inline-block; zoom: 1; *display: inline;}
    42. 

  42. .ui-datebox-scontrols { text-align: center; }
    43. 

  43. .ui-datebox-scontrols div { width: 55px; text-align: center; display: inline-block; zoom: 1; *display: inline;}
    44. 

  44. .ui-datebox-scontrols .ui-datebox-sinput { width: 68px; }
    45. 

  45. .ui-datebox-scontrols .ui-datebox-sinput input { width: 48px; text-align: center; }
    46. 

  46. .ui-datebox-input { width: 74px !important; margin-left: 1px; margin-right: 1px; text-align: center !important; display: inline-block !important; zoom:1; *display: inline; }
    47. 

  47. 

  48. /* Slide Mode Styles */
    49. 

  49. 

  50. .ui-datebox-sliderow-d { margin-bottom: 5px; text-align: center; height: 40px; width: 280px; overflow: hidden;}
    51. 

  51. .ui-datebox-sliderow-ym { margin-bottom: 5px; text-align: center; height: 32px; width: 280px; overflow: hidden;}
    52. 

  52. .ui-datebox-sliderow-hi { text-align: center; height: 32px; width: 280px; overflow: hidden;}
    53. 

  53. .ui-datebox-sliderow-int { display: inline-block; white-space: nowrap;}
    54. 

  54. 

  55. .ui-datebox-slideyear { text-align: center; display: inline-block; zoom:1; *display:inline; width: 84px; vertical-align: middle; line-height: 30px; height: 30px; font-size: 14px; font-weight: bold; }
    56. 

  56. .ui-datebox-slidemonth { text-align: center; display: inline-block; zoom:1; *display:inline; width: 51px; vertical-align: middle; line-height: 30px; height: 30px; font-size: 12px; font-weight: bold; }
    57. 

  57. .ui-datebox-slideday { text-align: center; display: inline-block; zoom:1; *display:inline; width: 32px; vertical-align: middle; line-height: 20px; height: 38px; font-size: 14px; font-weight: bold; }
    58. 

  58. .ui-datebox-slidehour { text-align: center; display: inline-block; zoom:1; *display:inline; width: 32px; vertical-align: middle; line-height: 22px; height: 24px; font-size: 14px; font-weight: bold; }
    59. 

  59. .ui-datebox-slidemins { text-align: center; display: inline-block; zoom:1; *display:inline; width: 32px; vertical-align: middle; line-height: 22px; height: 24px; font-size: 14px; font-weight: bold; }
    60. 

  60. .ui-datebox-slidearrow { text-align: center; display: inline-block; zoom:1; *display:inline; width: 10px; vertical-align: middle; line-height: 38px; height: 38px; font-size: 10px; font-weight: bold; }
    61. 

  61. .ui-datebox-slidewday { font-size: 10px; font-weight: normal; }
    62. 

  62. 

  63. /* Flip Mode Styles */
    64. 

  64. .ui-datebox-flipcontent { text-align: center; height: 125px; margin-bottom: -40px;}
    65. 

  65. .ui-datebox-flipcontent div { margin-left: 3px; margin-right: 3px; width: 77px; height: 120px; display: inline-block; text-align: center; zoom: 1; *display: inline; overflow: hidden;}
    66. 

  66. .ui-datebox-flipcenter { border: 1px solid #eee; height: 40px; margin-left: 10px; margin-right: 10px; position: relative; top: -45px;}
    67. 

  67. .ui-datebox-flipcontent ul { list-style-type: none; display: inline; }
    68. 

  68. .ui-datebox-flipcontent li { height: 30px; }
    69. 

  69. .ui-datebox-flipcontent li span { margin-top: 7px; display: block; }
    70. 

  70. /* Shared Styles */
    71. 

  71. 

  72. .ui-datebox-container { border: 5px solid #111 !important; width: 280px; }
    73. 

  73. .ui-datebox-screen { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
    74. 

  74. .ui-datebox-screen-modal { background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
    75. 

  75. .ui-datebox-hidden { display: none; }
    76. 

  76. .ui-dialog .ui-datebox-container { border: none !important; }
    77. 

  77. .ui-dialog-datebox .ui-content { padding: 5px !important;}
    78.