equal
deleted
inserted
replaced
|
1 /* |
|
2 * Superbox component |
|
3 */ |
|
4 |
|
5 .superbox *, |
|
6 .superbox :after, |
|
7 .superbox :before { |
|
8 margin: 0; |
|
9 padding: 0; |
|
10 box-sizing: border-box; |
|
11 -webkit-box-sizing: border-box; |
|
12 -moz-box-sizing: border-box; |
|
13 -webkit-font-smoothing: antialiased; |
|
14 -moz-font-smoothing: antialiased; |
|
15 -o-font-smoothing: antialiased; |
|
16 font-smoothing: antialiased; |
|
17 text-rendering: optimizeLegibility; |
|
18 } |
|
19 |
|
20 .superbox { |
|
21 &-list { |
|
22 display: inline-block; |
|
23 *display: inline; |
|
24 zoom: 1; |
|
25 width: 12.5%; |
|
26 padding: 5px; |
|
27 position: relative; |
|
28 |
|
29 &.active:before { |
|
30 content: "\f0d8"; |
|
31 font-family: FontAwesome; |
|
32 display: block; |
|
33 position: absolute; |
|
34 left: 43%; |
|
35 bottom: -34px; |
|
36 z-index: 2; |
|
37 text-align: center; |
|
38 font-size: 45px; |
|
39 color: #222; |
|
40 } |
|
41 |
|
42 @media only screen and (min-width:320px) { |
|
43 width: 50%; |
|
44 } |
|
45 @media only screen and (min-width:486px) { |
|
46 width: 25%; |
|
47 } |
|
48 @media only screen and (min-width:768px) { |
|
49 width: 16.66666667%; |
|
50 } |
|
51 @media only screen and (min-width:1025px) { |
|
52 width: 12.5%; |
|
53 } |
|
54 @media only screen and (min-width:1824px) { |
|
55 width: 12.5%; |
|
56 } |
|
57 } |
|
58 |
|
59 &-img { |
|
60 max-width: 100%; |
|
61 width: 100%; |
|
62 cursor: pointer; |
|
63 } |
|
64 |
|
65 &-show { |
|
66 text-align: left; |
|
67 position: relative; |
|
68 background-color: #222; |
|
69 width: 100%; |
|
70 float: left; |
|
71 padding: 25px 0 12px 25px; |
|
72 display: none; |
|
73 margin: 5px 0; |
|
74 } |
|
75 |
|
76 &-current-img { |
|
77 max-width: 100%; |
|
78 float: left; |
|
79 padding-right: 25px; |
|
80 padding-bottom: 13px; |
|
81 } |
|
82 |
|
83 &-img:hover { |
|
84 opacity: .8; |
|
85 } |
|
86 |
|
87 &-float { |
|
88 float: left; |
|
89 } |
|
90 |
|
91 &-close { |
|
92 opacity: .7; |
|
93 cursor: pointer; |
|
94 position: absolute; |
|
95 top: 15px; |
|
96 right: 15px; |
|
97 -webkit-transition: all .1s linear 0s; |
|
98 transition: all .1s linear 0s; |
|
99 |
|
100 &:hover { |
|
101 opacity: 1; |
|
102 } |
|
103 } |
|
104 |
|
105 &-imageinfo { |
|
106 display: inline-block; |
|
107 max-width: 500px; |
|
108 color: #fff; |
|
109 padding: 0 25px 0 0; |
|
110 |
|
111 span { |
|
112 font-size: 13px; |
|
113 color: #a19994; |
|
114 margin-right: -2px; |
|
115 padding-top: 10px; |
|
116 display: inline-block; |
|
117 padding-bottom: 13px; |
|
118 } |
|
119 |
|
120 >:first-child { |
|
121 margin-bottom: 10px; |
|
122 font-weight: 700; |
|
123 } |
|
124 |
|
125 span p:last-child { |
|
126 margin-top: 30px; |
|
127 } |
|
128 } |
|
129 } |