1 | @import 'lg-variables';
|
2 | @import 'lg-mixins';
|
3 | .lg-comment-box {
|
4 | width: 420px;
|
5 | max-width: 100%;
|
6 | position: absolute;
|
7 | right: 0;
|
8 | top: 0;
|
9 | bottom: 0;
|
10 | z-index: 9999;
|
11 | background-color: #fff;
|
12 | will-change: transform;
|
13 | @include transform(translate3d(100%, 0, 0));
|
14 | @include transitionCustom(transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s);
|
15 |
|
16 | .lg-comment-title {
|
17 | margin: 0;
|
18 | color: #fff;
|
19 | font-size: 18px;
|
20 | }
|
21 |
|
22 | .lg-comment-header {
|
23 | background-color: #000;
|
24 | padding: 12px 20px;
|
25 | position: absolute;
|
26 | left: 0;
|
27 | right: 0;
|
28 | top: 0;
|
29 | }
|
30 |
|
31 | .lg-comment-body {
|
32 | height: 100% !important;
|
33 | padding-top: 43px !important;
|
34 | width: 100% !important;
|
35 | }
|
36 |
|
37 | .fb-comments {
|
38 | height: 100%;
|
39 | width: 100%;
|
40 | background: url('#{$lg-path-images}/loading.gif') no-repeat scroll
|
41 | center center #fff;
|
42 | overflow-y: auto;
|
43 | display: inline-block;
|
44 | &[fb-xfbml-state='rendered'] {
|
45 | background-image: none;
|
46 | }
|
47 | > span {
|
48 | max-width: 100%;
|
49 | }
|
50 | }
|
51 |
|
52 | .lg-comment-close {
|
53 | position: absolute;
|
54 | right: 5px;
|
55 | top: 12px;
|
56 | cursor: pointer;
|
57 | font-size: 20px;
|
58 | color: #999;
|
59 | will-change: color;
|
60 | @include transition(color 0.2s linear);
|
61 | &:hover {
|
62 | color: #fff;
|
63 | }
|
64 | &:after {
|
65 | content: '\e070';
|
66 | }
|
67 | }
|
68 |
|
69 | iframe {
|
70 | max-width: 100% !important;
|
71 | width: 100% !important;
|
72 | }
|
73 |
|
74 | #disqus_thread {
|
75 | padding: 0 20px;
|
76 | }
|
77 | }
|
78 | .lg-outer {
|
79 | .lg-comment-overlay {
|
80 | background-color: rgba(0, 0, 0, 0.25);
|
81 | bottom: 0;
|
82 | cursor: default;
|
83 | left: 0;
|
84 | position: fixed;
|
85 | right: 0;
|
86 | top: 0;
|
87 | z-index: $zindex-toolbar - 1;
|
88 | opacity: 0;
|
89 | visibility: hidden;
|
90 | will-change: visibility, opacity;
|
91 | @include transition(
|
92 | visibility 0s linear 0.18s,
|
93 | opacity 0.18s linear 0s
|
94 | );
|
95 | }
|
96 | .lg-comment-toggle {
|
97 | &:after {
|
98 | content: '\e908';
|
99 | }
|
100 | }
|
101 | &.lg-comment-active {
|
102 | .lg-comment-overlay {
|
103 | @include transition-delay(0s);
|
104 | @include transform(translate3d(0, 0px, 0));
|
105 | opacity: 1;
|
106 | visibility: visible;
|
107 | }
|
108 | .lg-comment-toggle {
|
109 | color: #fff;
|
110 | }
|
111 | .lg-comment-box {
|
112 | @include transform(translate3d(0, 0, 0));
|
113 | }
|
114 | }
|
115 | }
|