@finqu/cool 1.2.29 → 1.3.0

package/scss/_frame.scss

@@ -1,627 +0,0 @@
-// Frame
-// -----------------------------------------------------------------------------------------
-
-@if $frame-enable {
-
-	// Html
-	html.dom-ready {
-
-		@include media-breakpoint-down(lg) {
-			.sidebar-left,
-			.sidebar-right {
-				transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
-			}
-		}
-	}
-
-	html {
-		overflow-y: hidden;
-	}
-
-	html,
-	body {
-	    width: 100%;
-	    height: 100%;
-	    overflow-x: hidden;
-	}
-
-	// Body
-	body {
-		@include media-breakpoint-down(lg) {
-			&.sidebar-left-open {
-				.site-main > .sidebar-left {
-					transform: translate3d(0px, 0, 0);
-				}
-
-				.site-header,
-				.site-main > .content {
-					transform: translate3d($frame-sidebar-left-width, 0, 0);
-				}
-			}
-
-			&.sidebar-right-open {
-				.site-main > .sidebar-right {
-					transform: translate3d(0px, 0, 0);
-				}
-
-				.site-header,
-				.site-main > .content {
-					transform: translate3d(-#{$frame-sidebar-right-width}, 0, 0);
-				}
-			}
-		}
-	}
-
-
-	// Site header
-	.site-header {
-		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(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%;
-	        	}
-	        }
-	    }
-	}
-
-
-	// Site main
-	.site-main {
-		position: relative;
-		overflow: visible;
-		z-index: 1;
-		height: 100%;
-
-		// Site content
-		.content {
-			position: relative;
-			width: 100%;
-		    height: 100%;
-		    overflow-x: hidden;
-		    overflow-y: auto;
-		    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;
-
-		    &.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 {
-		    	position: relative;
-		    	margin: 20px 0;
-		    	overflow: visible;
-
-		    	@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: 0 0 spacer(4);
-
-				& + .content-inner {
-					margin-top: 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: $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: $h3-font-size;
-					}
-				}
-
-				.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: 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);
-					}
-				}
-			}
-		}
-
-
-		// Sidebar left
-		.sidebar-left {
-			display: flex;
-			flex-direction: column;
-			position: absolute;
-			top: 0;
-		    bottom: 0;
-			left: 0;
-			overflow: hidden;
-			transform: translate3d(-#{$frame-sidebar-left-width}, 0, 0);
-			width: $frame-sidebar-left-width;
-			height: 100%;
-			max-height: 100%;
-			overflow-y: auto;
-			background-color: $frame-sidebar-left-bg-mobile;
-			border-right: $frame-sidebar-left-border-width solid $frame-sidebar-left-border-color;
-			transition-property: top, bottom, width;
-		    transition-duration: 0.2s, 0.2s, 0.35s;
-		    transition-timing-function: linear, linear, ease;
-		    z-index: auto;
-		    padding: $frame-sidebar-left-padding-y $frame-sidebar-left-padding-x;
-
-		    @include media-breakpoint-down(lg) {
-				position: fixed;
-				right: auto;
-				visibility: visible;
-				z-index: 1000;
-			}
-
-			@include media-breakpoint-up(lg) {
-				background-color: $frame-sidebar-left-bg;
-
-				&.visible {
-					transform: translate3d(0, 0, 0);
-
-					& + .content {
-						width: calc(100% - #{$frame-sidebar-left-width});
-						float: right;
-
-						.container-content {
-							max-width: 100%;
-						}
-					}
-				}
-			}
-
-			.sidebar-header {
-				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);
-				}
-
-				.ps__rail-y:focus > .ps__thumb-y {
-					background-color: rgba(0,0,0,0.8);
-				}
-
-				.collapse,
-				.collapsing {
-					width: 100%;
-				}
-
-				.nav {
-					position: relative;
-					margin: 0;
-					padding: $frame-sidebar-nav-padding-y $frame-sidebar-nav-padding-x;
-					list-style: none;
-					font-family: $frame-sidebar-nav-font-family;
-
-					li {
-						display: block;
-
-						.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;
-						    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;
-
-						    	&: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);
-									}
-								}
-							}
-
-						    &.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;
-							    }
-
-							    &:hover,
-							    &:focus {
-									.nav-item-title {
-										color: $frame-sidebar-nav-item-parent-hover-color;
-							    	}
-							    	.nav-icon,
-							    	.icon {
-										color: $frame-sidebar-nav-icon-hover-color;
-									}
-							    }
-
-								&.active,
-							    &[aria-expanded="true"] {
-							    	.nav-item-title {
-										color: $frame-sidebar-nav-item-parent-active-color;
-							    	}
-							    	.nav-icon {
-										color: $frame-sidebar-nav-icon-active-color;
-									}
-							    }
-
-							    &.active[aria-expanded="true"] {
-							    	cursor: default;
-
-							    	.nav-item-title:after {
-							    		display: none;
-							    	}
-							    }
-
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-parent-color;
-									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;
-
-								    &:after {
-										bottom: -3px;
-										height: 3px;
-										border-radius: 3px;
-									}
-								}
-
-								&[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;
-
-							li {
-								> .nav-item {
-									padding-left: 0;
-								}
-							}
-						}
-					}
-				}
-
-				> .spacer {
-					flex-grow: 1;
-					flex-shrink: 1;
-				}
-			}
-
-			.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;
-
-				@include media-breakpoint-up(lg) {
-					display: flex;
-				}
-
-				&:hover {
-					background-color: lighten($body-bg, 3%);
-				}
-
-				.avatar {
-					margin-right: spacer(2);
-					position: relative;
-					border: $border-width solid $grey-50;
-					border-radius: 50%;
-
-					.image {
-						overflow: hidden;
-					}
-
-					.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;
-					}
-				}
-
-				.information {
-					font-family: $font-family-title;
-					font-weight: 600;
-					flex: 1;
-
-					.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');
-					}
-				}
-
-				.icon {
-					color: theme-color('medium');
-				}
-			}
-		}
-
-
-		// Sidebar right
-		.sidebar-right {
-			display: flex;
-			flex-direction: column;
-			position: absolute;
-			top: 0;
-			right: 0;
-		    bottom: 0;
-		    width: $frame-sidebar-right-width;
-		    transform: translate3d($frame-sidebar-right-width, 0, 0);
-			height: 100%;
-			max-height: 100%;
-			overflow-y: auto;
-			background-color: $frame-sidebar-right-bg-mobile;
-			border-left: $frame-sidebar-right-border-width solid $frame-sidebar-right-border-color;
-			box-sizing: border-box;
-
-			@include media-breakpoint-up(lg) {
-				background-color: $frame-sidebar-right-bg;
-			}
-
-			@include media-breakpoint-down(lg) {
-				position: fixed;
-				left: auto;
-				visibility: visible;
-				overflow-y: visible;
-			}
-
-			@include media-breakpoint-up(lg) {
-				&.visible {
-					transform: translate3d(0, 0, 0);
-
-					& + .content {
-						width: calc(100% - #{$frame-sidebar-right-width});
-						float: right;
-
-						.container-content {
-							max-width: 100%;
-						}
-					}
-				}
-			}
-		}
-	}
-
-} @else {
-	.container-content {
-		margin-top: 30px;
-
-		.content-header {
-			position: relative;
-			width: 100%;
-			margin: 0 0 spacer(4);
-
-			& + .content-inner {
-				margin-top: 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: $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: $h3-font-size;
-				}
-			}
-
-			.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: 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);
-				}
-			}
-		}
-	}
-}