UNPKG

2.57 kBSCSSView Raw
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}