|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Weather
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7
|
|
|
8 .weather-card-image {
|
|
|
9 figure {
|
|
|
10 overflow: hidden;
|
|
|
11 height: em(290);
|
|
|
12 position: relative;
|
|
|
13 background-size: cover;
|
|
|
14 background-position: center center;
|
|
|
15 margin-bottom: 0;
|
|
|
16 }
|
|
|
17 img {
|
|
|
18 width: 100%;
|
|
|
19 }
|
|
|
20
|
|
|
21 figcaption {
|
|
|
22 @include position(absolute, 0);
|
|
|
23 h6 {
|
|
|
24 position: absolute;
|
|
|
25 bottom: em(10);
|
|
|
26 }
|
|
|
27 span{
|
|
|
28 position: absolute;
|
|
|
29 right: em(20,20);
|
|
|
30 bottom: em(10,20);
|
|
|
31 font-size: em(20);
|
|
|
32 sup {
|
|
|
33 font-size: em(10,20);
|
|
|
34 vertical-align: super;
|
|
|
35 }
|
|
|
36 }
|
|
|
37 }
|
|
|
38
|
|
|
39 .weather-footer {
|
|
|
40 div {
|
|
|
41 padding: 0 em(15);
|
|
|
42 margin: em(30) 0 em(30) 0;
|
|
|
43 border-left: rem(1) solid #eee;
|
|
|
44 &:first-child {
|
|
|
45 border: 0;
|
|
|
46 }
|
|
|
47 }
|
|
|
48 }
|
|
|
49 }
|
|
|
50
|
|
|
51
|
|
|
52 .weather-card-image-dark {
|
|
|
53 position: relative;
|
|
|
54 height: em(430);
|
|
|
55 overflow: hidden;
|
|
|
56 background-size: cover;
|
|
|
57 background-position: center center;
|
|
|
58
|
|
|
59 i {
|
|
|
60 position: absolute;
|
|
|
61 text-align: center;
|
|
|
62 top: 50%;
|
|
|
63 left: 50%;
|
|
|
64 transform: translateY(-50%) translateX(-50%);
|
|
|
65 font-size: em(50);
|
|
|
66 }
|
|
|
67
|
|
|
68 .weather-caption{
|
|
|
69 position: absolute;
|
|
|
70 bottom: em(30);
|
|
|
71 left: em(20);
|
|
|
72 }
|
|
|
73
|
|
|
74 .weather-date {
|
|
|
75 padding: em(10) em(15);
|
|
|
76 position: absolute;
|
|
|
77 bottom: em(45);
|
|
|
78 right: 0;
|
|
|
79 }
|
|
|
80 }
|
|
|
81
|
|
|
82 .weather-status {
|
|
|
83 font-size: em(30);
|
|
|
84 margin-left: em(-10,30);
|
|
|
85 }
|
|
|
86
|
|
|
87 .weather-card-default {
|
|
|
88 table tr td {
|
|
|
89 border: 0;
|
|
|
90 }
|
|
|
91
|
|
|
92 li {
|
|
|
93 padding: 0 em(15,16);
|
|
|
94 font-size: em(16);
|
|
|
95 }
|
|
|
96 }
|
|
|
97
|
|
|
98 .weather-card-simple {
|
|
|
99 h3 {
|
|
|
100 font-weight: 400;
|
|
|
101 }
|
|
|
102 i {
|
|
|
103 font-size: em(35);
|
|
|
104 margin-top: em(10,35);
|
|
|
105 }
|
|
|
106 }
|
|
|
107
|
|
|
108
|
|
|
109 // .weather-widget-tablist {
|
|
|
110 // margin-top: -20px;
|
|
|
111 // margin-bottom: -20px;
|
|
|
112 // figure {
|
|
|
113 // img {
|
|
|
114 // height: 285px;
|
|
|
115 // }
|
|
|
116 // position: relative;
|
|
|
117 // figcaption {
|
|
|
118 // position: absolute;
|
|
|
119 // left: 50%;
|
|
|
120 // top: 50%;
|
|
|
121 // transform: translate(-50%,-50%);
|
|
|
122 // h5 {
|
|
|
123 // font-size: 80px;
|
|
|
124 // }
|
|
|
125 // span {
|
|
|
126 // font-size: 20px;
|
|
|
127 // }
|
|
|
128 // }
|
|
|
129 // }
|
|
|
130 //
|
|
|
131 // section {
|
|
|
132 // i {
|
|
|
133 // font-size: 60px;
|
|
|
134 // }
|
|
|
135 // li {
|
|
|
136 // line-height: 25px;
|
|
|
137 // }
|
|
|
138 // }
|
|
|
139 //
|
|
|
140 // footer {
|
|
|
141 // .carousel {
|
|
|
142 // i {
|
|
|
143 // font-size: 22px;
|
|
|
144 // }
|
|
|
145 // .slick-arrow {
|
|
|
146 // z-index: -1;
|
|
|
147 // }
|
|
|
148 // }
|
|
|
149 //
|
|
|
150 // .slick-list {
|
|
|
151 // top: 40px;
|
|
|
152 // }
|
|
|
153 // .slick-dots {
|
|
|
154 // top: 0;
|
|
|
155 // li{
|
|
|
156 // &:first-child {
|
|
|
157 // margin-right: 15px;
|
|
|
158 // }
|
|
|
159 // button {
|
|
|
160 // height: 4px;
|
|
|
161 // width: 30px;
|
|
|
162 // padding: 0;
|
|
|
163 // background-color: #e6e6e6;
|
|
|
164 // &::before {
|
|
|
165 // opacity: 0;
|
|
|
166 // }
|
|
|
167 // }
|
|
|
168 // }
|
|
|
169 // li.slick-active button {
|
|
|
170 // background-color: #9a9a9a;
|
|
|
171 // }
|
|
|
172 // }
|
|
|
173 //
|
|
|
174 // }
|
|
|
175 //
|
|
|
176 // }
|
