Move files to follow webpack structure

src/styles/_lightbox.scss

@@ -0,0 +1,227 @@
+@import '../../node_modules/lightbox2/dist/css/lightbox.css';
+
+@mixin lightbox-icon($icon) {
+	background: none;
+	font-size: 2em;
+	@extend .fa;
+	@extend .#{$fa-css-prefix}-#{$icon};
+}
+
+.lightboxOverlay {
+	bottom: 0;
+	right: 0;
+	outline: none;
+}
+
+.lightbox {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+
+	&.vertical {
+		flex-direction: column;
+		
+		.lb-dataContainer {
+			width: 100%;
+			height: 30px;
+			
+			.lb-data {
+				flex-direction: row;
+
+				.lb-details {
+					width: calc(100% - 1.25rem);
+					
+					.lb-caption {
+						.lb-caption-line {
+							padding-right: 1em;
+							line-height: 1.33333333333em; //icon height
+							overflow: hidden;
+
+							&.comment {
+								max-width: 50%;
+								@include no-text-overflow();
+							}
+						}
+					}
+				}
+			
+				.lb-closeContainer {
+					.lb-close {
+						text-align: right;
+					}
+				}
+			}
+		}
+	}
+	&.horizontal {
+		flex-direction: row;
+		
+		.lb-dataContainer {
+			width: 200px;
+			height: 100%;
+			
+			.lb-data {
+				flex-direction: column;
+				
+				.lb-caption-line {
+					display: block;
+					margin-top: 1em;
+					line-height: 1.33333333em;
+
+					&.comment {
+						.fa {
+							vertical-align: text-bottom;
+						}
+
+						.comment-text {
+							display: inline-block;
+							width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
+							vertical-align: top;
+						}
+					}
+				}
+
+				.lb-closeContainer .lb-close {
+					margin-top: calc(1em/1.33333333);
+					float: none;
+				}
+			}
+		}
+	}
+	
+	/* Image */
+
+	.lb-outerContainer {
+		margin: 0;
+		border-radius:0;
+		background-color: rgba(255, 255, 255, 0.5);
+		
+		.lb-container {
+			overflow: hidden;
+		
+			&.moveable {
+				cursor: grab;
+			}
+
+			&.moving {
+				cursor: grabbing;
+			}
+
+			.lb-image {
+				image-orientation: from-image;
+				border-radius: 0;
+				border: none;
+				--translate-x: 0;
+				--translate-y: 0;
+				--scale: 1;
+				
+				transform:
+					translateX(var(--translate-x, 0))
+					translateY(var(--translate-y, 0))
+					scale(var(--scale, 1));
+			}
+		
+			.lb-video {
+				box-sizing: content-box;
+			}
+			&.lb-video-nav .lb-nav {
+				top: 100px;
+				height: calc(100% - 200px); //Leave space for video progress bar
+			}
+			
+			.lb-nav {
+
+				.lb-prev-area, .lb-next-area {
+					position: absolute;
+					top: 0;
+					height: 100%;
+					width: 50%;
+					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+					
+					&.lb-next-area {
+						right: 0;
+					}
+
+					&:hover a.lb-prev, &:hover a.lb-next {
+						filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+						opacity: 1;
+					}
+				}
+
+				a.lb-prev, a.lb-next {
+					color: white;
+					text-decoration: none;
+					text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+					width: 150px;
+					height: 150px;
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+
+					-webkit-transition: opacity 0.4s;
+					-moz-transition: opacity 0.4s;
+					-o-transition: opacity 0.4s;
+					transition: opacity 0.4s;
+					
+					&:before {
+						position: absolute;
+						top: 50%;
+						transform: translateY(-50%);
+					}
+				}
+			
+				a.lb-prev {
+					@include lightbox-icon(prev);
+					left: 0;
+				}
+			
+				a.lb-next {
+					@include lightbox-icon(next);
+					right: 0;
+				}
+			}
+		}
+	}
+	/* Titles */
+
+	.lb-dataContainer {
+		margin: 0;
+		padding: 0;
+		flex: 0 0 auto;
+		overflow: hidden;
+		
+		.lb-data {
+			text-align: left;
+			padding: 0.5rem 0.5rem 0 0.5rem;
+			display: flex;
+			
+			.lb-details {
+				float: none;
+				
+				.lb-caption-line:first-child {
+					margin-top: 0;
+				}
+			}
+
+			.lb-closeContainer  .lb-close {
+				@include lightbox-icon(close);
+				@extend .fa-lg;
+				@extend .fa-fw;
+				height: auto;
+				font-size: 1.3333333333em;
+				line-height: 1em;
+				color: white;
+			}
+		}
+	}
+
+	.lb-cancel {
+		@include lightbox-icon(cancel);
+		@extend .flicker;
+		color: #CCC;
+		text-decoration: none;
+	}
+}