rails_modular_admin 0.2.0

data/app/assets/stylesheets/rails_modular_admin/app/_common/header/search/search.scss

@@ -0,0 +1,68 @@
+.header .header-block-search {
+	$line-height: $header-height - 30px;
+	margin-right: auto;
+
+	// float: left;
+	padding-left: $content-padding-x-md;
+
+	@include media-down(sm) {
+		padding-left: $content-padding-x-xs;
+		display: none;
+	}
+
+	@include media(md) {
+		padding-left: $content-padding-x-sm;
+	}
+
+	@include media(lg) {
+		padding-left: $content-padding-x-md;
+	}
+
+	@include media-up(xl) {
+		padding-left:  $content-padding-x-lg;
+	}
+
+	& > form {
+		float: right;
+
+		@include media-down(sm) {
+			padding-left: 0;
+		}
+	} 
+
+	.input-container {
+		position: relative;
+		color: $color-text-light;
+
+		i {
+			position: absolute;
+			pointer-events: none;
+			display: block;
+			height: $line-height;
+			line-height: $line-height;
+			left: 0;
+		}
+
+		input {
+			background-color: transparent;
+			border: none;
+			padding-left: 25px;
+			height: 40px;
+			max-width: 150px;
+
+			@include media-down(sm) {
+				max-width: 140px;
+			}
+		}
+
+		// .underline {
+		// 	&:extend(.underline-animation);
+		// }
+
+
+		input:focus + .underline {
+			transform: scaleX(1);
+		}
+
+	}
+}

data/app/assets/stylesheets/rails_modular_admin/app/_common/modals/modal-media/modal-media.scss

@@ -0,0 +1,56 @@
+#modal-media {
+	.modal-body {
+		min-height: 250px;
+
+	}
+	
+	.modal-tab-content {
+        min-height: 300px;    
+    }
+
+	.images-container {
+		padding: 15px;
+		text-align: center;
+
+		.image-container {
+			margin: 0 auto 10px auto;
+			cursor: pointer;
+			transition: all 0.3s ease;
+			display: inline-block;
+			float: none;
+
+			&:hover {
+				border-color: fade-out($color-primary, 0.5);
+			}
+
+			&.active {
+				border-color: fade-out($color-primary, 0.5);	
+			}
+		}
+	}
+
+	.upload-container {
+		padding: 15px;	
+
+		.dropzone {
+			position: relative;
+			border: 2px dashed $color-primary;
+			height: 270px;
+
+			.dz-message-block {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translateY(-50%) translateX(-50%);
+
+				.dz-message {
+					margin: 0;
+					font-size: 24px;
+					color: $color-primary;
+					width: 230px;
+				}
+			}
+		}
+	}
+
+}

data/app/assets/stylesheets/rails_modular_admin/app/_common/modals/modals.scss

@@ -0,0 +1,19 @@
+.modal {
+
+    .modal-content {
+        border-radius: 0;
+    }
+
+    // MOdal tabs are defined in _common/modal/modal.scss
+
+    .modal-header {
+        background-color: $color-primary;
+        color: #ffffff;
+    }
+
+    .modal-footer {
+        .btn {
+            margin-bottom: 0;
+        }
+    }
+}

data/app/assets/stylesheets/rails_modular_admin/app/_common/sidebar/customize/customize.scss

@@ -0,0 +1,157 @@
+.customize {
+	// height: 200px;
+	width: 100%;
+	color: rgba(255, 255, 255, 0.5);
+	padding: 5px 15px;
+	text-align: center;
+
+	.customize-header{
+		margin-bottom: 10px;
+	}
+}
+
+#customize-menu {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: $sidebar-width;
+
+	@include media-down(sm) {
+		
+	}
+
+	.sidebar-open & {
+		@include media-down(md) {
+			left: 0;
+		}
+	}
+
+	@include media-down(md) {
+		// position: absolute;
+		transition: left 0.3s ease;
+		left: -$sidebar-width;
+	}
+
+	& > li {
+		& > a {
+			background-color: $sidebar-color-primary;
+			border-top: 1px solid fade-out($sidebar-color-secondary, 0.5);
+		}
+
+		& > a:hover,
+		&.open > a {
+			background-color: $sidebar-color-secondary;
+		}
+	}
+
+	.customize {	
+		width: $sidebar-width;
+		color: fade-out($color-text-inverse, 0.5);
+		background-color: $sidebar-color-secondary;
+		text-align: center;
+		padding: 10px 15px;
+		border-top: 2px solid $color-primary;
+
+		.customize-item {
+			margin-bottom: 15px;
+
+			.customize-header {
+				margin-bottom: 10px;
+			}
+
+			label {
+				font-weight: 400;
+				
+
+				&.title  {
+					font-size: 14px;
+				}
+			}
+
+			.radio {
+
+				& + span {
+					padding: 0;
+					padding-left: 5px
+				}
+
+				& + span:before {
+					font-size: 17px;
+					color: #546273;
+					cursor: pointer;
+				}
+
+				&:checked + span:before{
+					color: $color-primary;
+				}
+			}
+
+			.customize-colors {
+				list-style: none;
+
+				li {
+					display: inline-block;
+					margin-left: 5px;
+					margin-right: 5px;
+
+					.color-item {
+						display: block;
+						height: 20px;
+						width: 20px;
+						border: 1px solid;
+						cursor: pointer;
+
+						&.color-red {
+							background-color: #FB494D;
+							border-color: #FB494D;
+						}
+
+						&.color-orange {
+							background-color: #FE7A0E;
+							border-color: #FE7A0E;
+						}
+
+						&.color-green {
+							background-color: #8CDE33;
+							border-color: #8CDE33;
+						}
+
+						&.color-seagreen {
+							background-color: #4bcf99;
+							border-color: #4bcf99;
+						}
+
+						&.color-blue {
+							background-color: #52BCD3;
+							border-color: #52BCD3;
+						}
+
+						&.color-purple {
+							background-color: #7867A7;
+							border-color: #7867A7;
+						}
+
+						&.active {
+							position: relative;
+							font-family: FontAwesome;
+							font-size: 17px;
+							line-height: 17px;
+
+							&:before {
+								content: "\f00c";
+								position: absolute;
+								top: 0;
+								left: 0;
+								color: #fff;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+
+
+	
+}

data/app/assets/stylesheets/rails_modular_admin/app/_common/sidebar/header/header.scss

@@ -0,0 +1,14 @@
+.sidebar-header {
+	.brand {
+		color: #fff;
+		text-align: left;
+		padding-left: 25px;
+		line-height: $header-height;
+		font-size: 16px;
+		
+		@include media-down(sm) {
+			line-height: $header-height-xs;
+			font-size: 16px;
+		}
+	}
+}

data/app/assets/stylesheets/rails_modular_admin/app/_common/sidebar/sidebar.scss

@@ -0,0 +1,240 @@
+.sidebar {
+	background-color: $sidebar-color-primary;
+	width: $sidebar-width;
+	padding-bottom: 60px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	transition: left 0.3s ease;
+	z-index: 20;
+
+
+	@include media-down(md) {
+		position: fixed;
+		left: -$sidebar-width;
+	}
+
+	.sidebar-fixed & {
+		position: fixed;
+	}
+
+	.sidebar-open & {
+		left: 0;
+
+	}
+
+	.sidebar-container {
+		position: absolute;
+		top: 0;
+		bottom: 51px;
+		width: 100%;
+		left: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+
+		&::-webkit-scrollbar-track {
+			background-color: darken($sidebar-color-primary, 6.5%);
+		}
+	}
+
+	.label {
+		font-size: .75em;
+		display: inline-block;
+		border-radius: .2em;
+		padding: 2px 5px;
+		background-color: #ccc;
+		color: #000;
+		margin: 0 3px;
+	}
+
+	.label-screenful {
+		color: #fff;
+		background-color: #6769d4;
+	}
+
+	.sidebar-menu {
+
+		font-size: 14px;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		// Common styles
+		li {
+			a:focus,
+			.open & a:focus {
+				background-color: inherit;
+			}
+		}
+
+		// Second + menu items
+		ul {
+			padding: 0;
+			height: 0px;
+			overflow: hidden;
+
+			.loaded & {
+				height: auto;
+			}
+		}
+
+		li.active ul {
+			height: auto;
+		}
+
+
+		// All links which are not active
+		// have subdued color
+		li a {
+			color: $sidebar-color-text;
+			text-decoration: none;
+			display: block;
+		}
+
+		// All links which are not active
+		// On hover bg become darker
+		// Their color become lighter
+		li a:hover,
+		li.open > a,
+		li.open a:hover {
+			color: $sidebar-color-text-active;
+			background-color: $sidebar-color-secondary;
+		}
+
+		.arrow {
+			float: right;
+			font-size: 18px;
+			line-height: initial;
+			transition: all 0.3s ease;
+			margin-right: 0;
+
+			&:before {
+				content: "\f105" !important;
+			}
+		}
+
+		li.open > a {
+			.arrow {
+				transform: rotate(90deg);
+			}
+		}
+
+
+		// First level items
+		&> li {
+
+			// First level items links
+			& > a {
+				padding-top: 15px;
+				padding-bottom: 15px;
+				padding-left: 20px;
+				padding-right: 15px;
+			}
+
+			// First level active links have primary background
+			&.active > a,
+			&.active > a:hover {
+				background-color: $color-primary !important;
+				color: $color-text-inverse !important;
+			}
+
+			// First level active links have bit darker background
+			&.open > a {
+				background-color: darken($sidebar-color-primary, 3%);
+			}
+
+			// First level item links arrow
+			& > a {
+				i {
+					margin-right: 5px;
+					font-size: 16px;
+
+					&.arrow {
+						font-size: 20px;
+					}
+				}
+			}
+
+		}
+
+		// Second level items
+		& > li > .sidebar-nav> li {
+
+			// Second level and deeper items links
+			// Have bit darker background and more padding
+			// from left side
+			a {
+				padding-top: 10px;
+				padding-bottom: 10px;
+				padding-left: 50px;
+				padding-right: 15px;
+				background-color: darken($sidebar-color-primary, 3%);
+			}
+
+			// Second level active items links
+			// Have brighter color
+			&.active a {
+				color: $sidebar-color-text-active;
+			}
+
+			// Third level items
+			& > .sidebar-nav > li {
+				a {
+					padding-left: 60px;
+					padding-right: 15px;
+				}
+
+				& > .sidebar-nav > li {
+					a {
+						padding-left: 70px;
+					}
+				}
+			}
+		}
+	}
+
+}
+
+.sidebar-overlay {
+	position: absolute;
+	display: none;
+	left: 200vw;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 5;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	z-index: 15;
+
+	@include media-down(md) {
+		display: block;
+	}
+
+	@include media-down(sm) {
+		background-color: fade-out(#000, 0.3);
+	}
+
+
+	.sidebar-open & {
+		@include media-down(md) {
+			left: 0;
+			opacity: 1;
+		}
+	}
+}
+
+.sidebar-mobile-menu-handle {
+	display: none;
+	position: absolute;
+	top: $header-height-xs;
+	background-color: transparent;
+	width: 30px;
+	bottom: 0;
+	z-index: 10;
+
+	@include media-down(md) {
+		display: block;
+	}
+}