keystone/admin/public/styles/keystone/dashboard.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// Dashboard
// ==============================




// Model Group
// ------------------------------

// base

.dashboard-group {
	margin-bottom: 20px;
	padding-left: 30px;
}


// header

.dashboard-header {
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 40px;
	margin-top: 40px;
	padding-bottom: 1em;
}
.dashboard-heading {
	font-size: 2em;
	font-weight: 300;
}


// headings

.dashboard-group__heading {
	color: @gray-light;
	font-size: 1.5em;
	font-weight: 500;
	margin-bottom: .75em;
}
.dashboard-group__heading-icon {
	color: inherit;
	font-size: 16px;
	display: inline-block;
	margin-left: -30px;
	margin-top: -1px;
	vertical-align: middle;
	width: 30px;
}

// Small Devices
@media (max-width: @screen-xs-max) {
	.dashboard-header {
		border: 0;
		height: @grid-gutter-width;
		margin: 0;
		overflow: hidden;
		padding: 0;
	}
	.dashboard-heading {
		display: none;
	}

	// hide icons on small devices
	.dashboard-group {
		padding-left: 0,
	}
	.dashboard-group__heading-icon {
		display: none;
	}
}




// Model List
// ------------------------------

// base

.dashboard-group__lists {
	&:extend(.u-clearfix all);
	margin: 0 -10px 20px;
}


// wrapper for layout

.dashboard-group__list {
	float: left;
	padding: 0 10px 20px;
	position: relative;
	width: 100%;

	@media (min-width: @screen-sm) { width: 50%; }
	@media (min-width: @screen-md) { width: 33%; }
	@media (min-width: @screen-lg) { width: 25%; }
}


// the list represented as a tile

.dashboard-group__list-tile {
	.transition( box-shadow 80ms linear );
	background-color: @dashboard-list-bg;
	border-radius: @border-radius-base;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075), 0 0 0 1px rgba(0,0,0,0.1);
	color: @gray-light;
	display: block;
	line-height: 1;
	padding: 15px;
	padding-right: 54px; // make room for the create button
	position: relative;

	&:focus {
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075), 0 0 0 1px fade(@link-color, 50%);
		color: @gray-light;
		outline: none;
		text-decoration: none;
	}
	&:hover .dashboard-group__list-label {
		border-bottom-color: fade(@link-color, 50%);
	}

	&:active {
		box-shadow: 0 0 0 1px fade(@link-color, 50%);
		top: 1px;
	}
}
.dashboard-group__list-inner:hover >
.dashboard-group__list-tile {
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075), 0 0 0 1px fade(@link-color, 50%);
	color: @gray-light;
	outline: none;
	text-decoration: none;
}

.dashboard-group__list-label {
	.transition( border-color 80ms linear );
	.u-text-truncate();
	border-bottom: 1px solid transparent;
	color: @link-color;
	display: inline-block;
	font-size: 1.25em;
	font-weight: 500;
	padding-bottom: .05em; // prevent decenders being cropped
	margin-bottom: .2em;
}
.dashboard-group__list-count {
	padding-bottom: .2em;
}


// green create button

.dashboard-group__list-inner:hover >
.dashboard-group__list-create {
	background-color: darken(@gray-lighter, 6%);
}
.dashboard-group__list-inner:active >
.dashboard-group__list-create {
	top: 16px;
}

// upsetting specificity
.dashboard-group__list-inner >
.dashboard-group__list-create {
	.align-items(center);
	.display-flex();
	.justify-content(center);
	.square(24px);
	.transition( background-color 80ms linear );
	background-color: @gray-lighter;
	border-radius: @border-radius-base;
	color: white;
	position: absolute;
	right: 25px;
	top: 15px;

	&:hover,
	&:focus {
		background-color: @app-success;
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
		color: white;
		outline: none;
		text-decoration: none;
	}
	&:active {
		background-color: darken(@app-success, 6%);
	}
}