angular-material-calendar.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. $calendar-md-background-active: rgba(0, 0, 0, .02) !default;
  2. $calendar-md-shadow-active: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12) !default;
  3. $calendar-md-border: 1px solid rgba(0, 0, 0, .12) !default;
  4. $calendar-md-background-hover: rgba(0, 0, 0, .04) !default;
  5. calendar-md {
  6. display: block;
  7. max-height: 100%;
  8. .md-toolbar-tools {
  9. h2 {
  10. overflow-x: hidden;
  11. text-overflow: ellipsis;
  12. white-space: nowrap;
  13. }
  14. }
  15. md-content {
  16. > md-content {
  17. // Week row, agenda view.
  18. border: $calendar-md-border;
  19. &.agenda {
  20. // Week container
  21. > * {
  22. > * {
  23. &.disabled {
  24. color: rgba(0, 0, 0, .3);
  25. pointer-events: none;
  26. cursor: auto;
  27. }
  28. border-bottom: $calendar-md-border;
  29. // Date label.
  30. :first-child {
  31. padding: 12px;
  32. width: 200px;
  33. text-align: right;
  34. color: rgba(0,0,0,.75);
  35. font-weight: 100;
  36. overflow-x: hidden;
  37. text-overflow: ellipsis;
  38. white-space: nowrap;
  39. }
  40. // Day content container
  41. :not(:first-child) {
  42. overflow: hidden;
  43. text-overflow: ellipsis;
  44. }
  45. }
  46. }
  47. }
  48. // All day cells, don't make them too small, even on tiny screens.
  49. > * > * {
  50. min-width: 48px;
  51. }
  52. // Week row (calendar view.)
  53. &.calendar {
  54. // Subheader row.
  55. > :first-child {
  56. background: $calendar-md-background-active;
  57. border-bottom: $calendar-md-border;
  58. margin-right: 0;
  59. min-height: 36px;
  60. }
  61. // Week rows.
  62. > :not(:first-child) {
  63. // Day containers.
  64. > * {
  65. border-bottom: $calendar-md-border;
  66. border-right: $calendar-md-border;
  67. cursor: pointer;
  68. &:hover {
  69. background: $calendar-md-background-hover;
  70. }
  71. &.disabled {
  72. color: rgba(0, 0, 0, .3);
  73. pointer-events: none;
  74. cursor: auto;
  75. }
  76. &.active {
  77. box-shadow: $calendar-md-shadow-active;
  78. background: $calendar-md-background-active;
  79. }
  80. // Day number label.
  81. :first-child {
  82. padding: 0;
  83. }
  84. // Day html content.
  85. :last-child {
  86. overflow: hidden;
  87. text-overflow: ellipsis;
  88. }
  89. }
  90. }
  91. }
  92. }
  93. }
  94. }