rails_modular_admin 0.2.0

data/app/assets/stylesheets/rails_modular_admin/_common/images-container/images-container.scss

@@ -0,0 +1,129 @@
+.images-container {
+	@include clearfix();
+
+	// padding-top: 30px;
+
+	.image-container {
+		float: left;
+		padding: 3px;
+		margin-right: 10px;
+		margin-bottom: 35px;
+		position: relative;
+		border: 1px solid lighten($color-divider, 5%);
+		overflow: hidden;
+		// box-shadow: 0 0 3px #BFBFBF;
+		// border-radius: 3px;
+		
+
+		&.active {
+			border-color: $color-primary;
+		}
+
+		// .controls {
+			// transition: opacity .2s ease;
+			// opacity: 0;
+		// }
+
+		&:hover {
+			.controls {
+				bottom: 0;
+				opacity: 1;
+			}
+		}
+	}
+
+	.controls {
+		position: absolute;
+		left: 0;
+		right: 0;
+		opacity: 0;
+		bottom: -35px;
+		text-align: center;
+		height: 35px;
+		// background-color: lighten($color-divider, 8%);
+		font-size: 24px;
+		transition: bottom 0.2s ease, opacity 0.2s ease;
+		background-color: #fff;
+
+		@include clearfix();
+
+		.control-btn {
+			display: inline-block;
+			color: $color-text;
+			// border-radius: 3px;
+			cursor: pointer;
+			width: 35px;
+			height: 35px;
+			line-height: 35px;
+			text-align: center;
+			// color: $color-text-inverse;
+			opacity: 0.5;
+			transition: opacity 0.3s ease;
+
+			&:hover {
+				opacity: 1;
+			}
+
+
+
+			&.move {
+				cursor: move;
+			}
+
+			&.star {
+				color: #FFB300;
+
+				i:before{
+					content: "\f006";
+				}
+
+				&.active {
+					i:before{
+						content: "\f005";
+					}
+				}
+			}
+
+			&.remove {
+				color: $color-danger;
+			}
+		}
+	}
+
+	.image {
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		width: 130px;
+		height: 135px;
+		// cursor: pointer;
+		line-height: 135px;
+		text-align: center;
+		
+		
+
+		&:active {
+
+		}
+	}
+
+	.image-container.main {
+		border-color: #FFB300; 
+	}
+
+	.image-container.new {
+		opacity: 0.6;
+		transition: opacity 0.3s ease;
+		border-style: dashed;
+		border: 1px $color-primary solid;
+		color: $color-primary;
+
+		.image {
+			font-size: 2.5rem;
+		}
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}

data/app/assets/stylesheets/rails_modular_admin/_common/items-list/items-list.scss

@@ -0,0 +1,388 @@
+$item-list-padding-x: 10px !default;
+$item-list-padding-y: 10px !default;
+$item-list-line-height: 1.4rem !default;
+$item-list-col-grow: 3 !default;
+$item-list-col-shrink: 3 !default;
+
+/* *******************************************
+*		  Item List general styles
+********************************************** */
+
+.item-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	margin-bottom: 0;
+	line-height: $item-list-line-height;
+
+	@include media(lg) {
+		font-size: 1rem;
+	}
+
+	@include media(md) {
+		font-size: 0.95rem;
+	}
+
+	@include media-down(sm) {
+		font-size: 1.05rem;
+	}
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	&.striped {
+		& > li {
+			border-bottom: 1px solid $item-list-color-border;
+		}
+
+		& > li:nth-child(2n + 1) {
+			background-color: lighten($color-divider, 12%);
+
+			@include media-down(sm) {
+				background-color: lighten($color-divider, 11%);
+			}
+		}
+
+		.item-list-footer {
+			border-bottom: none;
+		}
+	}
+}
+
+
+/* *******************************************
+*			Item general styles
+********************************************** */
+
+
+.item-list {
+	.item {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.item-row {
+		display: flex;
+		align-items: stretch;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		min-width: 100%;
+
+		&.nowrap {
+			flex-wrap: nowrap;
+		}
+	}
+
+	.item-col {
+		align-items: center;
+		display: flex;
+		padding: $item-list-padding-y $item-list-padding-x $item-list-padding-y 0;
+		flex-basis: 0;
+		flex-grow: $item-list-col-grow;
+		flex-shrink: $item-list-col-shrink;
+		margin-left: auto;
+		margin-right: auto;
+		min-width: 0;
+
+		&.fixed {
+			flex-grow: 0;
+			flex-shrink: 0;
+			flex-basis: auto;
+		}
+
+		&.pull-left {
+			margin-right: auto;
+		}
+
+		&.pull-right {
+			margin-left: auto;
+		}
+
+		& > div {
+			width: 100%;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+
+	.no-overflow {
+		overflow: hidden;
+	}
+
+	.no-wrap {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+
+/* *******************************************
+*				Item components
+********************************************** */
+
+
+.item-list {
+
+	/********************************************
+	*					Header
+	*********************************************/
+
+	.item-list-header {
+		.item-col.item-col-header {
+			span {
+				color: #999;
+				font-size: 0.8rem;
+				font-weight: 700 !important;
+			}
+		}
+	}
+
+	/********************************************
+	*					Heading
+	*********************************************/
+
+	.item-heading {
+		font-size: 0.9rem;
+		display: none;
+		color: #666;
+		font-weight: 700;
+		padding-right: $item-list-padding-x;
+
+		@include media-down(sm) {
+			display: block;
+		}
+
+		@include media(sm) {
+			width: 100%;
+		}
+
+		@include media-down(xs) {
+			width: 40%;
+		}
+	}
+
+	/********************************************
+	*					Checkbox
+	*********************************************/
+
+	.item-col.item-col-check {
+		flex-basis: 20px + $item-list-padding-x;
+
+		@include media-down(sm) {
+			order: -8;
+		}
+	}
+
+	.item-check {
+		margin-bottom: 0;
+
+		.checkbox + span {
+			padding-right: 0;
+
+			&:before {
+				width: 20px;
+			}
+		}
+	}
+
+	/********************************************
+	*					Image
+	*********************************************/
+
+	.item-col.item-col-img {
+		display: flex;
+		flex-basis: 60px + $item-list-padding-x;
+
+		&.xs{
+			flex-basis: 30px + $item-list-padding-x;
+		}
+
+		&.sm {
+			flex-basis: 40px + $item-list-padding-x;
+		}
+
+		&.lg {
+			flex-basis: 90px + $item-list-padding-x;
+		}
+
+		&.xl {
+			flex-basis: 110px + $item-list-padding-x;
+		}
+
+		a {
+			width: 100%;
+			// display: flex;
+		}
+	}
+
+	.item-img {
+		flex-grow: 1;
+		align-self: stretch;
+	    background-color: #efefef;
+	    padding-bottom: 100%;
+		width: 100%;
+		height: 0;
+
+	   	@include bg-cover();
+	}
+
+	/********************************************
+	*					Title
+	*********************************************/
+
+	.item-col.item-col-title {
+
+		@include media-down(sm) {
+			order: -4;
+		}
+
+		a {
+			display: block;
+		}
+	}
+
+	.item-title {
+		margin: 0;
+		font-size: inherit;
+		line-height: inherit;
+		font-weight: 600;
+	}
+
+	/********************************************
+	*					Stats
+	*********************************************/
+
+	.item-stats {
+		height: $item-list-line-height;
+	}
+
+	/********************************************
+	*				     Actions
+	*********************************************/
+
+	.item-col.item-col-actions-dropdown {
+		flex-basis: 30px + $item-list-padding-x;
+		text-align: center;
+		padding-left: 0 !important;
+
+		@include media-down(sm) {
+			order: -3;
+
+			flex-basis: 30px + $item-list-padding-x !important;
+			padding-right: $item-list-padding-x;
+		}
+	}
+
+	.item-actions-dropdown {
+		position: relative;
+		font-size: 1.1rem;
+
+		&.active {
+			.item-actions-block  {
+				max-width: 120px;
+			}
+
+			.item-actions-toggle-btn {
+				color: $color-primary;
+
+				.active {
+					display: block;
+				}
+
+				.inactive {
+					display: none;
+				}
+			}
+		}
+
+		.item-actions-toggle-btn {
+			color: lighten($color-text-light, 10);
+			font-size: 1.2rem;
+			cursor: pointer;
+			width: 100%;
+			line-height: 30px;
+			text-align: center;
+			text-decoration: none;
+
+			.active {
+				display: none;
+			}
+		}
+
+		.item-actions-block {
+			height: 30px;
+			max-width: 0px;
+			line-height: 30px;
+			overflow: hidden;
+			position: absolute;
+			top: 0;
+			right: 100%;
+			background-color: $color-divider;
+			border-radius: 3px;
+			transition: all 0.15s ease-in-out;
+
+			&.direction-right {
+				right: auto;
+				left: 100%;
+			}
+
+
+			.item-actions-list {
+				padding: 0;
+				list-style: none;
+				white-space: nowrap;
+				padding: 0 5px;
+
+				li{
+					display: inline-block;
+					padding: 0;
+				}
+
+				a {
+					display: block;
+					padding: 0 5px;
+
+					&.edit {
+						color: #38424C;
+					}
+
+					&.check {
+						color: #40B726;
+					}
+
+					&.remove {
+						color: #DB0E1E;
+					}
+				}
+			}
+		}
+
+	}
+
+	/********************************************
+	*			   Something else?
+	*********************************************/
+
+}
+
+
+/* *******************************************
+*				Adjustments
+********************************************** */
+
+// Item which is located inside card inside item-list
+.card > .item-list .item > .item-row {
+	padding: 0 $card-padding-x;
+
+	@include media-up(xl) {
+		padding: 0 $card-padding-x-xl;
+	}
+
+	@include media-down(sm) {
+		padding: 0 $card-padding-x-sm;
+	}
+}