|
0
|
1 // main: ../style.scss
|
|
|
2
|
|
|
3 /* CLNDR
|
|
|
4 ========================*/
|
|
|
5 .clndr {
|
|
|
6 padding: em(25) em(30);
|
|
|
7 position: relative;
|
|
|
8
|
|
|
9 .day-number {
|
|
|
10 position: relative;
|
|
|
11 z-index: 2;
|
|
|
12 }
|
|
|
13
|
|
|
14 .clndr-grid {
|
|
|
15 @include clearfix;
|
|
|
16 .days {
|
|
|
17 display: block;
|
|
|
18 > .day {
|
|
|
19 display: inline-block;
|
|
|
20 width: 14.28571%;
|
|
|
21 float: left;
|
|
|
22 padding: 0 em(10);
|
|
|
23 line-height: 3em;
|
|
|
24 cursor: pointer;
|
|
|
25 position: relative;
|
|
|
26 z-index: 0;
|
|
|
27
|
|
|
28 &.event::before,
|
|
|
29 &.today::before {
|
|
|
30 content: "";
|
|
|
31 @include position(absolute, 50% 50% null null);
|
|
|
32 transform: translateY(-50%) translateX(50%);
|
|
|
33 background: rgba($body-color, 0.1);
|
|
|
34 z-index: 1;
|
|
|
35 @include size(2.5em);
|
|
|
36 border-radius: 100px;
|
|
|
37 display: block;
|
|
|
38 opacity: 0;
|
|
|
39 transition: all $transition-duration $transition-function;
|
|
|
40 }
|
|
|
41
|
|
|
42 &.event::before {
|
|
|
43 background: none;
|
|
|
44 border:1px solid rgba($body-color,0.3);
|
|
|
45 }
|
|
|
46
|
|
|
47 &.event::before { opacity: 1 }
|
|
|
48 &.last-month,
|
|
|
49 &.next-month {
|
|
|
50 color: rgba($body-color, 0.2);
|
|
|
51 }
|
|
|
52 }
|
|
|
53 }
|
|
|
54 }
|
|
|
55
|
|
|
56 .event-listing {
|
|
|
57 @include clearfix();
|
|
|
58 @include margin( null em(-32) em(-26));
|
|
|
59 margin-top: em(35);
|
|
|
60 padding: em(20) 0 em(20);
|
|
|
61 color: $body-color;
|
|
|
62 background: #fff;
|
|
|
63 // border: 1px solid rgba($body-color, 0.2);
|
|
|
64 // border-top: 0;
|
|
|
65
|
|
|
66 .selected-date {
|
|
|
67 position: relative;
|
|
|
68 text-align: center;
|
|
|
69 display: block;
|
|
|
70 .date {
|
|
|
71 vertical-align: top;
|
|
|
72 font-size: em(30);
|
|
|
73 line-height: 1em;
|
|
|
74 }
|
|
|
75 }
|
|
|
76
|
|
|
77 .event-item {
|
|
|
78 border-bottom: 1px solid #ddd;
|
|
|
79 padding-bottom: em(10);
|
|
|
80 margin-bottom: em(10);
|
|
|
81 &:last-child { border-bottom: 0; margin-bottom: 0 }
|
|
|
82 }
|
|
|
83
|
|
|
84 .event-item-time {
|
|
|
85 opacity: 0.5;
|
|
|
86 }
|
|
|
87
|
|
|
88 .event-item-title {
|
|
|
89 margin-left: em(10);
|
|
|
90 }
|
|
|
91
|
|
|
92 .event-item-icon {
|
|
|
93 vertical-align: sub;
|
|
|
94 float: right;
|
|
|
95 }
|
|
|
96 }
|
|
|
97
|
|
|
98 .clndr-previous-button,
|
|
|
99 .clndr-today-button,
|
|
|
100 .clndr-next-button {
|
|
|
101 cursor: pointer;
|
|
|
102 position: relative;
|
|
|
103 top: em(-2);
|
|
|
104 }
|
|
|
105 }
|
|
|
106
|
|
|
107 .color-white .clndr{
|
|
|
108
|
|
|
109 &,
|
|
|
110 .clndr-title,
|
|
|
111 .curront-month,
|
|
|
112 .days .day {
|
|
|
113 color: #fff;
|
|
|
114 }
|
|
|
115
|
|
|
116 .days .day {
|
|
|
117 &.last-month,
|
|
|
118 &.next-month {
|
|
|
119 color: rgba(255,255,255,0.3);
|
|
|
120 }
|
|
|
121
|
|
|
122 &.event::before {
|
|
|
123 background: none;
|
|
|
124 border: 1px solid rgba(255,255,255,0.3);
|
|
|
125 }
|
|
|
126 }
|
|
|
127
|
|
|
128 .days .day.today {
|
|
|
129 color: $color-scheme;
|
|
|
130 &::before {
|
|
|
131 background: white;
|
|
|
132 opacity: 1;
|
|
|
133 border-color: transparent;
|
|
|
134 }
|
|
|
135 }
|
|
|
136 }
|
