mk-react-images/examples/src/example.less

A simple, responsive lightbox component for displaying an array of images with React.js

//
// Common Example Styles
// ------------------------------




// Constants
// ------------------------------

// example site

@gutter:						20px;
@table-cell-gutter:				10px;
@left-col-width:				180px;
@heading-color:					black;

@kbd-bg-color:					#fafafa;
@kbd-border-color:				#ccc;

@link-color:					#00D7FF;
@text-color:					#333;

@nav-gutter:					30px;
@nav-item-padding:				5px;
@nav-padding:					@nav-gutter - @nav-item-padding;



// Base
// ------------------------------

body {
	background-color: white;
	color: @text-color;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

a {
	color: @link-color;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}
hr {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 2em;
	margin-top: 2em;
}

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 940px;
	padding: 0 @gutter;
}




// Columns
// ------------------------------

.left-col {
	display: none;
	float: left;
	position: fixed;
	width: @left-col-width;
	z-index: 1;
}




// Navigation
// ------------------------------

.page-nav {
	list-style: none;
	margin: 0;
	padding: 0 @nav-padding 0 0;
	text-align: right;
}
.page-nav__item {

}
.page-nav__link {
	display: block;
	padding: @nav-item-padding;
}





// Headings
// ------------------------------

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: @heading-color;
	font-weight: 500;
	line-height: 1;
	margin-bottom: .66em;
	margin-top: 0;
}

h1, .h1 {
	font-size: 2em;
}
h2, .h2 {
	font-size: 2em;
	font-weight: 300;
	padding-top: @nav-gutter;
}
h3, .h3 {
	color: #999;
	font-size: 1em;
	font-weight: bold;
	margin-top: 2em;
	text-transform: uppercase;
}
h4, .h4 {
	font-size: 1em;
}
h5, .h5 {
	font-size: .85em;
}
h6, .h6 {
	font-size: .75em;
}




// Layout
// ------------------------------

// header

.page-header {
	padding: @gutter 0;

	h1, h2, h3 {
		// color: white;
	}
	p {
		margin: 0;
	}
	a {
		border-bottom: 1px solid fade(white, 30%);
		// color: white;
		text-decoration: none;

		&:hover,
		&:focus {
			border-bottom-color: white;
			outline: none;
			text-decoration: none;
		}
	}
}
.page-header__title {
	font-size: 3em;
}
.page-header__subtitle {
	color: #777;
	font-size: 1.125rem;
	font-weight: 300;
}

// subheader

.page-subheader {
	background-color: mix(@link-color, white, 8%);
	border-radius: 4px;
	padding: @gutter;
}
.page-subheader__button {
	float: right;
}
.page-subheader__link {
	border-bottom: 1px solid fade(@link-color, 30%);
	outline: none;
	text-decoration: none;

	&:hover,
	&:focus {
		border-bottom-color: @link-color;
		outline: none;
		text-decoration: none;
	}
}

// content

.page-content {
	padding-bottom: @nav-gutter;
}

// footer

.page-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	color: #999;
	padding: @nav-gutter 0;
	text-align: center;
}

// options table

.options-table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-left: -@table-cell-gutter;
	margin-right: -@table-cell-gutter;
	max-width: 100%;
	width: 100%;

	td, th {
		padding: @table-cell-gutter;
	}
	th {
		border-bottom: 2px solid rgba(0, 0, 0, 0.05);
		color: #999;
		font-weight: normal;
	}
	td {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}
}




// Miscellaneous
// ------------------------------

.section {
	margin-bottom: 40px;
}

.hint {
	font-size: .85em;
	margin: 15px 0;
	color: #666;
}

kbd {
	background-color: @kbd-bg-color;
	border-radius: 3px;
	border: 1px solid @kbd-border-color;
	border-bottom-color: darken(@kbd-border-color, 4%);
	border-top-color: lighten(@kbd-border-color, 4%);
	box-shadow: 0 1px 1px rgba(0,0,0,.12),0 2px 0 0 rgba(255,255,255,.7) inset;
	color: #666;
	display: inline-block;
	font-family: Consolas,"Liberation Mono",Courier,monospace;
	font-size: .85em;
	font-weight: 500;
	line-height: inherit;
	padding: 1px 4px;
	white-space: nowrap;

	// little hack to tweak "visual-middle" alignment
	position: relative;
	top: -1px;
}

pre {
	background-color: #eee;
	border-radius: 4px;
	margin-bottom: @nav-gutter;
	overflow: auto;
	padding: 10px 20px;
}


// Responsive
// ------------------------------

// large phones and up

@media (min-width: 481px) {
	.page-header,
	.page-nav {
		padding-bottom: @nav-gutter;
		padding-top: @nav-gutter;
	}
	.page-header__title {
		font-size: 4em;
	}
	.page-subheader {
		font-size: 1.125em;
		line-height: 28px;
	}
}

// large phones and down

@media (max-width: 768px) {
	.options-table-container {
		overflow-x: scroll;
		overflow-y: hidden;
		width: 100%;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-overflow-scrolling: touch;
	}
	.options-table {
		table-layout: auto;

		td {
			white-space: nowrap;
		}
	}
}

// tablets and up

@media (min-width: 769px) {
	.left-col {
		display: block;
	}
	.right-col {
		padding-left: @left-col-width;
	}
	.page-content {
		padding-left: @nav-gutter;
		position: relative;

		&::before {
			background: linear-gradient(90deg, fade(#e9e9e9, 0%) 94%, #e9e9e9), linear-gradient(90deg, fade(#f6f6f6, 0%) 50%, #f6f6f6);
			border-right: 1px solid #e6e6e6;
			content: " ";
			margin-left: -(@left-col-width + @nav-gutter);
			height: 100%;
			position: fixed;
			width: @left-col-width;
		}
	}
	.page-header__subtitle {
		font-size: 2em;
	}
	.page-footer {
		border: none;
		bottom: 0;
		float: left;
		margin-left: -@nav-gutter;
		position: fixed;
		text-align: right;
		width: @left-col-width;
		z-index: 1;
	}
	.page-footer__copyright--small {
		display: none;
	}
}