@finqu/cool 1.2.28 → 1.2.29

package/scss/_frame.scss

@@ -6,7 +6,7 @@
 	// Html
 	html.dom-ready {
 
-		@include media-breakpoint-down(sm) {
+		@include media-breakpoint-down(lg) {
 			.sidebar-left,
 			.sidebar-right {
 				transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
@@ -27,7 +27,7 @@
 
 	// Body
 	body {
-		@include media-breakpoint-down(sm) {
+		@include media-breakpoint-down(lg) {
 			&.sidebar-left-open {
 				.site-main > .sidebar-left {
 					transform: translate3d(0px, 0, 0);
@@ -55,17 +55,31 @@
 
 	// Site header
 	.site-header {
-		@include media-breakpoint-down(sm) {
+		position: relative;
+		z-index: 0;
+
+		@include media-breakpoint-down(lg) {
 			transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
 		}
 
 		& + .site-main {
 			height: calc(100% - #{$navbar-height + $navbar-border-width});
 
-			@include media-breakpoint-down(sm) {
+			@include media-breakpoint-down(lg) {
 				height: calc(100% - #{$navbar-height-sm + $navbar-border-width});
 			}
 		}
+
+		@each $breakpoint, $container-max-width in $container-max-widths {
+
+	        @include media-breakpoint-up($breakpoint) {
+	        	$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+	        	&.d#{$infix}-none + .site-main {
+	        		height: 100%;
+	        	}
+	        }
+	    }
 	}
 
 
@@ -74,6 +88,7 @@
 		position: relative;
 		overflow: visible;
 		z-index: 1;
+		height: 100%;
 
 		// Site content
 		.content {
@@ -85,11 +100,21 @@
 		    float: none;
 		    transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
 		    -webkit-overflow-scrolling: touch;
+		    box-shadow: $frame-content-box-shadow;
+		    background-color: $frame-content-bg;
+		    padding: $frame-content-padding-sm;
+		    border-radius: $frame-content-border-radius-sm;
 
-		    @include media-breakpoint-up(md) {
+		    &.no-bg {
+		    	background-color: transparent;
+		    }
+
+		    @include media-breakpoint-up(lg) {
 		    	transition-property: top, bottom, width;
 			    transition-duration: 0.2s, 0.2s, 0.35s;
 			    transition-timing-function: linear, linear, ease;
+			    padding: $frame-content-padding;
+			    border-radius: $frame-content-border-radius;
 		    }
 
 		    .content-inner {
@@ -97,50 +122,74 @@
 		    	margin: 20px 0;
 		    	overflow: visible;
 
-		    	@include media-breakpoint-up(md) {
+		    	@include media-breakpoint-up(lg) {
 					margin: 20px 0;
 				}
+
+				@include media-breakpoint-down(sm) {
+					> .alert,
+					.section-container > .alert,
+					.section {
+						width: auto;
+						margin-left: -$frame-content-padding-sm * 2;
+						margin-right: -$frame-content-padding-sm * 2;
+					}
+				}
 		    }
 
 		    .content-header {
 				position: relative;
 				width: 100%;
-				margin: 20px 0;
+				margin: 0 0 spacer(4);
 
 				& + .content-inner {
 					margin-top: 0;
 				}
 
-				@include media-breakpoint-up(md) {
-					margin: 20px 0;
+				@include media-breakpoint-up(lg) {
+					margin: 0 0 spacer(4);
+				}
+
+				.breadcrumbs {
+					font-family: $font-family-title;
+					font-weight: 500;
 				}
 
 				.content-header-title {
-					font-size: $h3-font-size;
+					font-size: $h4-font-size;
 					margin-bottom: 0;
+					font-family: $font-family-title;
+					font-weight: 600;
+					word-break: break-all;
 
 					@include media-breakpoint-up(sm) {
-						font-size: $h1-font-size;
+						font-size: $h3-font-size;
 					}
 				}
 
-				.content-header-primary-action .btn {
-					@include media-breakpoint-up(sm) {
-						@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size , $btn-line-height, $btn-border-radius);
+				.content-header-primary-action {
+					.btn {
+						@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+
+						@include media-breakpoint-up(sm) {
+							@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+						}
 					}
 				}
 
+				.content-header-helper-actions {
+					margin-top: 10px;
+				}
+
 				.content-header-secondary-actions {
 					font-size: 0;
 
 					&.has-content {
-						margin-top: 20px;
-						margin-bottom: 20px;
+						margin: 20px (-$btn-padding-x-sm - 2px);
+					}
 
-						@include media-breakpoint-up(md) {
-							margin-top: 10px;
-							margin-bottom: 0;
-						}
+					.btn {
+						@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
 					}
 				}
 			}
@@ -166,15 +215,17 @@
 			transition-property: top, bottom, width;
 		    transition-duration: 0.2s, 0.2s, 0.35s;
 		    transition-timing-function: linear, linear, ease;
-		    z-index: 1000;
+		    z-index: auto;
+		    padding: $frame-sidebar-left-padding-y $frame-sidebar-left-padding-x;
 
-		    @include media-breakpoint-down(sm) {
+		    @include media-breakpoint-down(lg) {
 				position: fixed;
 				right: auto;
 				visibility: visible;
+				z-index: 1000;
 			}
 
-			@include media-breakpoint-up(md) {
+			@include media-breakpoint-up(lg) {
 				background-color: $frame-sidebar-left-bg;
 
 				&.visible {
@@ -192,29 +243,23 @@
 			}
 
 			.sidebar-header {
-		    	padding: 20px;
-
-				& + .sidebar-content {
-		    		&:before {
-		    			content: '';
-		    			display: block;
-		    			border-top: $frame-sidebar-left-border-width solid $frame-sidebar-left-border-color;
-		    		}
-		    	}
-
-		    	@include media-breakpoint-up(md) {
-			    	& + .sidebar-content {
-			    		&:before {
-			    			display: none;
-			    		}
-			    	}
-		    	}
+				padding: $frame-sidebar-left-header-padding-y $frame-sidebar-left-header-padding-x 0 $frame-sidebar-left-header-padding-x;
+				z-index: 11;
+				position: relative;
 			}
 
 			.sidebar-content {
 				position: relative;
 				height: 100%;
 				z-index: 10;
+				padding: $frame-sidebar-left-content-padding-y $frame-sidebar-left-content-padding-x;
+				display: flex;
+				flex-direction: column;
+				margin-top: $frame-sidebar-spacing;
+
+				> * {
+					flex-shrink: 0;
+				}
 
 				.ps__thumb-y {
 					background-color: rgba(0,0,0,0.5);
@@ -232,43 +277,90 @@
 				.nav {
 					position: relative;
 					margin: 0;
-					padding: 0;
+					padding: $frame-sidebar-nav-padding-y $frame-sidebar-nav-padding-x;
 					list-style: none;
+					font-family: $frame-sidebar-nav-font-family;
 
 					li {
-						display: flex;
-						align-items: center;
-						flex-wrap: wrap;
-						position: relative;
-
-						[data-collapse-indicator] {
-							width: 21px;
-						}
+						display: block;
 
-						.nav-additional-action {
-							padding: 8px 10px;
-							flex: 0 auto;
-							border: 0;
+						.nav-item {
+							cursor: pointer;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							overflow: hidden;
+							padding: $frame-sidebar-nav-item-child-padding-y $frame-sidebar-nav-item-child-padding-x;
+							position: relative;
 						    background: none;
-						    margin: 0 10px 0 0;
-						    width: 16px;
-						    text-align: center;
-						    box-sizing: content-box;
+						    border: 0;
+						    flex: 0 0 auto;
+						    margin: 0;
 						    outline: 0;
+						    word-break: break-all;
+
+						    [data-collapse-indicator] {
+						    	color: theme-color('medium');
+
+					    		@include media-breakpoint-up(lg) {
+					    			display: none;
+					    		}
+					    	}
+
+						    .nav-item-title {
+						    	display: inline;
+						    	position: relative;
+						    	color: $frame-sidebar-nav-item-child-color;
+						    	font-size: $frame-sidebar-nav-item-child-font-size;
+						    	font-weight: $frame-sidebar-nav-item-child-font-weight;
 
-							&:hover {
-								.icon {
-									color: $frame-sidebar-nav-icon-hover-color;
+						    	&:after {
+									display: block;
+									content: " ";
+									position: absolute;
+									left: 0;
+									bottom: -2px;
+									width: 100%;
+									height: 2px;
+									border-radius: 2px;
+									background-color: black;
+									transform: scaleX(0);
+									transform-origin: left;
+									transition-property: transform;
+									transition-duration: .5s;
+									transition-timing-function: cubic-bezier(0.24, -0.06, 0.17, 1.71);
+								}
+						    }
+
+						    &:hover,
+							&:focus {
+								outline: 0;
+
+								.nav-item-title {
+									color: $frame-sidebar-nav-item-child-hover-color;
+
+									&:after {
+										transform: scaleX(1);
+									}
 								}
 							}
 
-							.icon {
-							    color: $frame-sidebar-nav-icon-color;
+						    &.active {
+								outline: 0;
+
+								.nav-item-title {
+									color: $frame-sidebar-nav-item-child-active-color;
+
+									&:after {
+										transform: scaleX(1);
+									}
+								}
 							}
 						}
 
 						&.nav-parent {
 							> .nav-item {
+								padding: $frame-sidebar-nav-item-padding-y $frame-sidebar-nav-item-padding-x;
 
 								&[disabled] {
 							    	cursor: default;
@@ -295,97 +387,132 @@
 									}
 							    }
 
+							    &.active[aria-expanded="true"] {
+							    	cursor: default;
+
+							    	.nav-item-title:after {
+							    		display: none;
+							    	}
+							    }
+
 								.nav-item-title {
-									display: block;
-									position: relative;
-									font-size: $frame-sidebar-nav-item-parent-font-size;
-									font-weight: $font-weight-normal;
 									color: $frame-sidebar-nav-item-parent-color;
-								    line-height: 25px;
+									flex: 0 0 auto;
+									font-size: $frame-sidebar-nav-item-parent-font-size;
+									font-weight: $frame-sidebar-nav-item-parent-font-weight;
+									position: relative;
 								    align-self: center;
+								    display: inline;
+								    line-height: 25px;
 								    text-align: left;
-								    width: 100%;
 
-								    @include media-breakpoint-up(sm) {
-								    	font-weight: $font-weight-bold;
-								    }
+								    &:after {
+										bottom: -3px;
+										height: 3px;
+										border-radius: 3px;
+									}
 								}
 
-								.nav-icon {
-									align-self: center;
-									float: left;
-									text-align: center;
-									line-height: 25px;
-									font-size: $frame-sidebar-nav-icon-size;
-									margin: 0 auto;
-									color: $frame-sidebar-nav-icon-color;
-									min-width: 23px;
-
-									& + span {
-										margin-left: 20px;
+								&[data-toggle="collapse"] {
+									.nav-item-title {
+									    &:after {
+											display: none;
+										}
+
+										@include media-breakpoint-up(lg) {
+											&:after {
+												display: block;
+											}
+										}
 									}
 								}
+							}
+						}
+
+						.nav {
+							padding: $frame-sidebar-sub-nav-padding-y $frame-sidebar-sub-nav-padding-x;
 
-								.icon {
-									color: $frame-sidebar-nav-icon-color;
+							li {
+								> .nav-item {
+									padding-left: 0;
 								}
 							}
 						}
+					}
+				}
 
-						.nav-item {
-							position: relative;
-							display: inline-flex;
-							flex: 1 0;
-							cursor: pointer;
-						    padding: 8px 20px;
-						    margin: 0;
-						    opacity: .85;
-						    border: 0;
-						    background: none;
-						    outline: 0;
-						    word-break: break-all;
+				> .spacer {
+					flex-grow: 1;
+					flex-shrink: 1;
+				}
+			}
 
-						    .nav-item-title {
-						    	color: $frame-sidebar-nav-item-child-color;
-						    }
+			.user-account {
+				display: none;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				cursor: pointer;
+				padding: $frame-sidebar-left-content-padding-y $frame-sidebar-left-content-padding-x;
+				margin-top: $frame-sidebar-spacing;
 
-						    &:hover,
-							&:focus {
-								outline: 0;
+				@include media-breakpoint-up(lg) {
+					display: flex;
+				}
 
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-child-hover-color;
-								}
-							}
+				&:hover {
+					background-color: lighten($body-bg, 3%);
+				}
 
-						    &.active {
-								outline: 0;
+				.avatar {
+					margin-right: spacer(2);
+					position: relative;
+					border: $border-width solid $grey-50;
+					border-radius: 50%;
 
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-child-active-color;
-									font-weight: $font-weight-bold;
-								}
-							}
-						}
+					.image {
+						overflow: hidden;
+					}
 
-						// Sub links
-						li {
+					.notification-counter {
+					    background-color: theme-color('brand');
+					    color: white;
+					    font-weight: bolder;
+					    font-size: 10px;
+					    border-radius: 10px;
+					    padding: 2px 4px;
+					    height: 18px;
+					    display: flex;
+					    justify-content: center;
+					    align-items: center;
+					    position: absolute;
+					    left: -5px;
+					    top: -5px;
+					    z-index: 10;
+					    border: $border-width solid $grey-50;
+					}
+				}
 
-							&.divider {
-								margin-left: 65px;
-								margin-right: 20px;
-								border-bottom: 1px solid $frame-sidebar-nav-item-border-color;
-							}
+				.information {
+					font-family: $font-family-title;
+					font-weight: 600;
+					flex: 1;
 
-							> .nav-item {
-								padding-left: 65px;
-							}
-						}
+					.user-name {
+						font-size: $font-size-sm;
+						margin-bottom: 0;
+						color: theme-color('dark');
+					}
+
+					.merchant-name {
+						font-size: $font-size-xs;
+						margin-bottom: 0;
+						color: theme-color('medium');
 					}
 				}
 
-				> .nav {
-					padding: 20px 0;
+				.icon {
+					color: theme-color('medium');
 				}
 			}
 		}
@@ -408,139 +535,91 @@
 			border-left: $frame-sidebar-right-border-width solid $frame-sidebar-right-border-color;
 			box-sizing: border-box;
 
-			@include media-breakpoint-up(md) {
+			@include media-breakpoint-up(lg) {
 				background-color: $frame-sidebar-right-bg;
 			}
 
-			@include media-breakpoint-down(sm) {
+			@include media-breakpoint-down(lg) {
 				position: fixed;
 				left: auto;
 				visibility: visible;
 				overflow-y: visible;
 			}
 
-			.sidebar-tabs {
-				display: flex;
-				flex-wrap: wrap;
-				padding: 0;
-				margin: 0;
-				list-style: none;
-				border-bottom: 1px solid $frame-sidebar-tabs-border-color;
-				min-height: 49px;
-
-				.tab-item {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					flex: 1;
-					margin-bottom: -1px;
+			@include media-breakpoint-up(lg) {
+				&.visible {
+					transform: translate3d(0, 0, 0);
 
-					.tab-item-action {
-						display: block;
-						border-left: 0;
-						border-top: 0;
-						border-right: 0;
-						border-bottom: 2px solid transparent;
-						cursor: pointer;
-						padding: 0;
-						margin: 0;
-						background: $frame-sidebar-tabs-bg;
-						outline: 0;
-						width: 100%;
-						height: 100%;
-						color: $frame-sidebar-tabs-color;
-
-						&.active {
-							color: $frame-sidebar-tabs-active-color;
-	    					border-color: $frame-sidebar-tabs-active-border-color;
-	    					background-color: $frame-sidebar-tabs-active-bg;
-						}
+					& + .content {
+						width: calc(100% - #{$frame-sidebar-right-width});
+						float: right;
 
-						&:hover:not(.active) {
-							color: $frame-sidebar-tabs-hover-color;
-	    					border-color: $frame-sidebar-tabs-hover-border-color;
+						.container-content {
+							max-width: 100%;
 						}
 					}
 				}
 			}
-
-			.sidebar-tab-content {
-				position: relative;
-			    overflow: hidden;
-			    display: flex;
-			    height: 100%;
-			    transition: height .5s cubic-bezier(.35,0,.25,1);
-
-				.sidebar-tab {
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					position: absolute;
-					display: block;
-					overflow: hidden;
-
-					&.active {
-						position: relative;
-					    overflow-x: hidden;
-					    overflow-y: auto;
-					    z-index: 1;
-					    flex-grow: 1;
-					}
-
-					.tab-content {
-						position: relative;
-						backface-visibility: hidden;
-					    height: 100%;
-					    overflow: auto;
-					    transition: all .3s ease-in-out;
-					    padding: 15px;
-					}
-				}
-			}
 		}
 	}
 
 } @else {
+	.container-content {
+		margin-top: 30px;
 
-	.content-header {
-		position: relative;
-		width: 100%;
-		margin: 20px 0;
+		.content-header {
+			position: relative;
+			width: 100%;
+			margin: 0 0 spacer(4);
 
-		@include media-breakpoint-up(md) {
-			margin: 20px 0;
-		}
+			& + .content-inner {
+				margin-top: 0;
+			}
 
-		& + .content-inner {
-			margin-top: 0;
-		}
+			@include media-breakpoint-up(lg) {
+				margin: 0 0 spacer(4);
+			}
 
-		.content-header-title {
-			font-size: $h3-font-size;
-			margin-bottom: 0;
+			.breadcrumbs {
+				font-family: $font-family-title;
+				font-weight: 500;
+			}
+
+			.content-header-title {
+				font-size: $h4-font-size;
+				margin-bottom: 0;
+				font-family: $font-family-title;
+				font-weight: 600;
+				word-break: break-all;
 
-			@include media-breakpoint-up(sm) {
-				font-size: $h1-font-size;
+				@include media-breakpoint-up(sm) {
+					font-size: $h3-font-size;
+				}
 			}
-		}
 
-		.content-header-primary-action .btn {
-			@include media-breakpoint-up(sm) {
-				@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size , $btn-line-height, $btn-border-radius);
+			.content-header-primary-action {
+				.btn {
+					@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+
+					@include media-breakpoint-up(sm) {
+						@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+					}
+				}
 			}
-		}
 
-		.content-header-secondary-actions {
-			font-size: 0;
+			.content-header-helper-actions {
+				margin-top: 10px;
+			}
 
-			&.has-content {
-				margin-top: 20px;
-				margin-bottom: 20px;
+			.content-header-secondary-actions {
+				font-size: 0;
 
-				@include media-breakpoint-up(md) {
-					margin-top: 10px;
-					margin-bottom: 0;
+				&.has-content {
+					margin: 20px (-$btn-padding-x-sm - 2px);
+				}
+
+				.btn {
+					@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
 				}
 			}
 		}