1 | | $ig-screen-sm-min: 768px !default; |
2 | | $ig-black: #222 !default; |
3 | | $ig-blue: #337ab7 !default; |
4 | | $ig-background-black: rgba(0, 0, 0, .4) !default; |
5 | | |
6 | | .image-gallery { |
7 | | user-select: none; |
8 | | } |
9 | | |
10 | | .image-gallery-content { |
11 | | position: relative; |
12 | | |
13 | | .image-gallery-left-nav, |
14 | | .image-gallery-right-nav { |
15 | | display: none; |
16 | | font-size: ms( 10 ); |
17 | | height: 100%; |
18 | | position: absolute; |
19 | | top: 0; |
20 | | z-index: 4; |
21 | | border-color: #eee; |
22 | | -webkit-transition: background 0.1s ease, border 0.1s ease; |
23 | | transition: background 0.1s ease, border 0.1s ease; |
24 | | |
25 | | @media (max-width: $ig-screen-sm-min) { |
26 | | font-size: 3.4em; |
27 | | } |
28 | | |
29 | | @media (min-width: $ig-screen-sm-min) { |
30 | | &:hover { |
31 | | background: #fff; |
32 | | opacity: 0.8; |
33 | | border: 1px solid #eee; |
34 | | } |
35 | | } |
36 | | |
37 | | &:before { |
38 | | position: relative; |
39 | | font-family: 'dashicons'; |
40 | | } |
41 | | } |
42 | | |
43 | | .image-gallery-left-nav { |
44 | | left: 0; |
45 | | |
46 | | &:before { |
47 | | content: '\f341'; |
48 | | } |
49 | | |
50 | | &:hover { |
51 | | margin-left: -1px; |
52 | | } |
53 | | } |
54 | | |
55 | | .image-gallery-right-nav { |
56 | | right: 0; |
57 | | |
58 | | &:before { |
59 | | content: '\f345'; |
60 | | } |
61 | | |
62 | | &:hover { |
63 | | margin-right: -1px; |
64 | | } |
65 | | } |
66 | | |
67 | | &:hover { |
68 | | .image-gallery-left-nav, |
69 | | .image-gallery-right-nav { |
70 | | display: block; |
71 | | } |
72 | | } |
73 | | } |
74 | | |
75 | | .image-gallery-slides { |
76 | | line-height: 0; |
77 | | overflow: hidden; |
78 | | position: relative; |
79 | | white-space: nowrap; |
80 | | border: 1px solid #eee; |
81 | | } |
82 | | |
83 | | .image-gallery-slide { |
84 | | left: 0; |
85 | | position: absolute; |
86 | | top: 0; |
87 | | width: 100%; |
88 | | |
89 | | &.center { |
90 | | position: relative; |
91 | | } |
92 | | |
93 | | .image-gallery-image { |
94 | | margin: 0; |
95 | | } |
96 | | |
97 | | img { |
98 | | display: block; |
99 | | margin: 0 auto; |
100 | | } |
101 | | |
102 | | .image-gallery-description { |
103 | | background: #f5f5f5; |
104 | | color: $color__text-main; |
105 | | line-height: 1.5; |
106 | | padding: 10px 20px; |
107 | | white-space: normal; |
108 | | font-size: ms( -2 ); |
109 | | |
110 | | @media (max-width: $ig-screen-sm-min) { |
111 | | font-size: ms( -2 ); |
112 | | padding: 8px 15px; |
113 | | } |
114 | | |
115 | | } |
116 | | } |
117 | | |
118 | | .image-gallery-thumbnails { |
119 | | background: #fff; |
120 | | margin-top: 5px; |
121 | | //overflow: hidden; |
122 | | |
123 | | .image-gallery-thumbnails-container { |
124 | | cursor: pointer; |
125 | | text-align: center; |
126 | | white-space: nowrap; |
127 | | } |
128 | | |
129 | | } |
130 | | |
131 | | .image-gallery-thumbnail { |
132 | | display: table-cell; |
133 | | margin-right: 5px; |
134 | | border: 1px solid #eee; |
135 | | max-height: 100px; |
136 | | overflow: hidden; |
137 | | |
138 | | .image-gallery-image { |
139 | | margin: 0; |
140 | | } |
141 | | |
142 | | img { |
143 | | vertical-align: middle; |
144 | | width: 100px; |
145 | | |
146 | | @media (max-width: $ig-screen-sm-min) { |
147 | | width: 75px; |
148 | | } |
149 | | } |
150 | | |
151 | | &:hover { |
152 | | box-shadow: 0 1px 8px rgba(0,0,0,0.3); |
153 | | } |
154 | | |
155 | | &.active { |
156 | | border: 1px solid $ig-blue; |
157 | | } |
158 | | } |
159 | | |
160 | | .image-gallery-thumbnail-label { |
161 | | color: $ig-black; |
162 | | font-size: 1em; |
163 | | |
164 | | @media(max-width: $ig-screen-sm-min) { |
165 | | font-size: 0.8em; |
166 | | } |
167 | | } |
168 | | |
169 | | .image-gallery-index { |
170 | | background: $ig-background-black; |
171 | | bottom: 0; |
172 | | color: #fff; |
173 | | line-height: 1; |
174 | | padding: 10px 20px; |
175 | | position: absolute; |
176 | | right: 0; |
177 | | z-index: 4; |
178 | | } |
| 1 | // $ig-screen-sm-min: 768px !default; |
| 2 | // $ig-black: #222 !default; |
| 3 | // $ig-blue: #337ab7 !default; |
| 4 | // $ig-background-black: rgba(0, 0, 0, .4) !default; |
| 5 | |
| 6 | // .image-gallery { |
| 7 | // user-select: none; |
| 8 | // } |
| 9 | |
| 10 | // .image-gallery-content { |
| 11 | // position: relative; |
| 12 | |
| 13 | // .image-gallery-left-nav, |
| 14 | // .image-gallery-right-nav { |
| 15 | // display: none; |
| 16 | // font-size: ms( 10 ); |
| 17 | // height: 100%; |
| 18 | // position: absolute; |
| 19 | // top: 0; |
| 20 | // z-index: 4; |
| 21 | // border-color: #eee; |
| 22 | // -webkit-transition: background 0.1s ease, border 0.1s ease; |
| 23 | // transition: background 0.1s ease, border 0.1s ease; |
| 24 | |
| 25 | // @media (max-width: $ig-screen-sm-min) { |
| 26 | // font-size: 3.4em; |
| 27 | // } |
| 28 | |
| 29 | // @media (min-width: $ig-screen-sm-min) { |
| 30 | // &:hover { |
| 31 | // background: #fff; |
| 32 | // opacity: 0.8; |
| 33 | // border: 1px solid #eee; |
| 34 | // } |
| 35 | // } |
| 36 | |
| 37 | // &:before { |
| 38 | // position: relative; |
| 39 | // font-family: 'dashicons'; |
| 40 | // } |
| 41 | // } |
| 42 | |
| 43 | // .image-gallery-left-nav { |
| 44 | // left: 0; |
| 45 | |
| 46 | // &:before { |
| 47 | // content: '\f341'; |
| 48 | // } |
| 49 | |
| 50 | // &:hover { |
| 51 | // margin-left: -1px; |
| 52 | // } |
| 53 | // } |
| 54 | |
| 55 | // .image-gallery-right-nav { |
| 56 | // right: 0; |
| 57 | |
| 58 | // &:before { |
| 59 | // content: '\f345'; |
| 60 | // } |
| 61 | |
| 62 | // &:hover { |
| 63 | // margin-right: -1px; |
| 64 | // } |
| 65 | // } |
| 66 | |
| 67 | // &:hover { |
| 68 | // .image-gallery-left-nav, |
| 69 | // .image-gallery-right-nav { |
| 70 | // display: block; |
| 71 | // } |
| 72 | // } |
| 73 | // } |
| 74 | |
| 75 | // .image-gallery-slides { |
| 76 | // line-height: 0; |
| 77 | // overflow: hidden; |
| 78 | // position: relative; |
| 79 | // white-space: nowrap; |
| 80 | // border: 1px solid #eee; |
| 81 | // } |
| 82 | |
| 83 | // .image-gallery-slide { |
| 84 | // left: 0; |
| 85 | // position: absolute; |
| 86 | // top: 0; |
| 87 | // width: 100%; |
| 88 | |
| 89 | // &.center { |
| 90 | // position: relative; |
| 91 | // } |
| 92 | |
| 93 | // .image-gallery-image { |
| 94 | // margin: 0; |
| 95 | // } |
| 96 | |
| 97 | // img { |
| 98 | // display: block; |
| 99 | // margin: 0 auto; |
| 100 | // } |
| 101 | |
| 102 | // .image-gallery-description { |
| 103 | // background: #f5f5f5; |
| 104 | // color: $color__text-main; |
| 105 | // line-height: 1.5; |
| 106 | // padding: 10px 20px; |
| 107 | // white-space: normal; |
| 108 | // font-size: ms( -2 ); |
| 109 | |
| 110 | // @media (max-width: $ig-screen-sm-min) { |
| 111 | // font-size: ms( -2 ); |
| 112 | // padding: 8px 15px; |
| 113 | // } |
| 114 | |
| 115 | // } |
| 116 | // } |
| 117 | |
| 118 | // .image-gallery-thumbnails { |
| 119 | // background: #fff; |
| 120 | // margin-top: 5px; |
| 121 | // //overflow: hidden; |
| 122 | |
| 123 | // .image-gallery-thumbnails-container { |
| 124 | // cursor: pointer; |
| 125 | // text-align: center; |
| 126 | // white-space: nowrap; |
| 127 | // } |
| 128 | |
| 129 | // } |
| 130 | |
| 131 | // .image-gallery-thumbnail { |
| 132 | // display: table-cell; |
| 133 | // margin-right: 5px; |
| 134 | // border: 1px solid #eee; |
| 135 | // max-height: 100px; |
| 136 | // overflow: hidden; |
| 137 | |
| 138 | // .image-gallery-image { |
| 139 | // margin: 0; |
| 140 | // } |
| 141 | |
| 142 | // img { |
| 143 | // vertical-align: middle; |
| 144 | // width: 100px; |
| 145 | |
| 146 | // @media (max-width: $ig-screen-sm-min) { |
| 147 | // width: 75px; |
| 148 | // } |
| 149 | // } |
| 150 | |
| 151 | // &:hover { |
| 152 | // box-shadow: 0 1px 8px rgba(0,0,0,0.3); |
| 153 | // } |
| 154 | |
| 155 | // &.active { |
| 156 | // border: 1px solid $ig-blue; |
| 157 | // } |
| 158 | // } |
| 159 | |
| 160 | // .image-gallery-thumbnail-label { |
| 161 | // color: $ig-black; |
| 162 | // font-size: 1em; |
| 163 | |
| 164 | // @media(max-width: $ig-screen-sm-min) { |
| 165 | // font-size: 0.8em; |
| 166 | // } |
| 167 | // } |
| 168 | |
| 169 | // .image-gallery-index { |
| 170 | // background: $ig-background-black; |
| 171 | // bottom: 0; |
| 172 | // color: #fff; |
| 173 | // line-height: 1; |
| 174 | // padding: 10px 20px; |
| 175 | // position: absolute; |
| 176 | // right: 0; |
| 177 | // z-index: 4; |
| 178 | // } |