timePicker.scss 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. @import "./variables.scss";
  2. $module: #{$prefix}-timepicker;
  3. $module-list: #{$prefix}-scrolllist;
  4. .#{$module} {
  5. display: inline-block;
  6. &-panel {
  7. .#{$module-list}-body {
  8. height: $height-timePicker_panel_body;
  9. }
  10. .#{$module-list}-item,
  11. .#{$module-list}-item-wheel {
  12. flex: none;
  13. }
  14. .#{$module-list}-item-wheel,
  15. .#{$module-list}-item-wheel:not(:last-child) {
  16. border: none;
  17. }
  18. &-list {
  19. &-ampm {
  20. width: $width-timePicker_panel_list_ampm;
  21. }
  22. &-hour {
  23. width: $width-timePicker_panel_list_hour;
  24. }
  25. &-minute {
  26. width: $width-timePicker_panel_list_minute;
  27. }
  28. &-second {
  29. width: $width-timePicker_panel_list_second;
  30. }
  31. }
  32. }
  33. &-range {
  34. &-panel {
  35. .#{$module}-lists {
  36. display: flex;
  37. box-shadow: $shadow-timePicker_range_panel;
  38. border: $width-timePicker_range_panel-border solid $color-timePicker_range_panel-border;
  39. border-radius: $radius-timePicker_range_panel;
  40. // left
  41. .#{$prefix}-scrolllist:first-of-type {
  42. border-radius: $radius-timePicker_range_panel 0 0 $radius-timePicker_range_panel;
  43. }
  44. // right
  45. .#{$prefix}-scrolllist:last-of-type {
  46. border-radius: 0 $radius-timePicker_range_panel $radius-timePicker_range_panel 0;
  47. }
  48. & > .#{$prefix}-scrolllist:not(:last-child) {
  49. .#{$prefix}-scrolllist {
  50. &-body {
  51. border-right: $width-timePicker_range_panel_scrolllist_body-border solid $color-timePicker_range_picker_panel_split-border;
  52. }
  53. }
  54. }
  55. & > .#{$prefix}-scrolllist {
  56. box-shadow: none;
  57. .#{$prefix}-scrolllist {
  58. &-body,
  59. &-header {
  60. padding: $spacing-timePicker_range_panel_scrolllist_header_body-padding;
  61. }
  62. }
  63. }
  64. }
  65. }
  66. }
  67. .#{$module}-input {
  68. @include font-size-regular;
  69. border-radius: $radius-timePicker_input;
  70. align-items: center;
  71. }
  72. .#{$prefix}-input-readonly {
  73. cursor: pointer;
  74. }
  75. }
  76. @import "./rtl.scss";