@finqu/cool 1.2.28 → 1.3.0

package/scss/_frame.scss

@@ -1,548 +0,0 @@
-// Frame
-// -----------------------------------------------------------------------------------------
-
-@if $frame-enable {
-
-	// Html
-	html.dom-ready {
-
-		@include media-breakpoint-down(sm) {
-			.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(sm) {
-			&.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 {
-		@include media-breakpoint-down(sm) {
-			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) {
-				height: calc(100% - #{$navbar-height-sm + $navbar-border-width});
-			}
-		}
-	}
-
-
-	// Site main
-	.site-main {
-		position: relative;
-		overflow: visible;
-		z-index: 1;
-
-		// 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;
-
-		    @include media-breakpoint-up(md) {
-		    	transition-property: top, bottom, width;
-			    transition-duration: 0.2s, 0.2s, 0.35s;
-			    transition-timing-function: linear, linear, ease;
-		    }
-
-		    .content-inner {
-		    	position: relative;
-		    	margin: 20px 0;
-		    	overflow: visible;
-
-		    	@include media-breakpoint-up(md) {
-					margin: 20px 0;
-				}
-		    }
-
-		    .content-header {
-				position: relative;
-				width: 100%;
-				margin: 20px 0;
-
-				& + .content-inner {
-					margin-top: 0;
-				}
-
-				@include media-breakpoint-up(md) {
-					margin: 20px 0;
-				}
-
-				.content-header-title {
-					font-size: $h3-font-size;
-					margin-bottom: 0;
-
-					@include media-breakpoint-up(sm) {
-						font-size: $h1-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-secondary-actions {
-					font-size: 0;
-
-					&.has-content {
-						margin-top: 20px;
-						margin-bottom: 20px;
-
-						@include media-breakpoint-up(md) {
-							margin-top: 10px;
-							margin-bottom: 0;
-						}
-					}
-				}
-			}
-		}
-
-
-		// 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: 1000;
-
-		    @include media-breakpoint-down(sm) {
-				position: fixed;
-				right: auto;
-				visibility: visible;
-			}
-
-			@include media-breakpoint-up(md) {
-				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: 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;
-			    		}
-			    	}
-		    	}
-			}
-
-			.sidebar-content {
-				position: relative;
-				height: 100%;
-				z-index: 10;
-
-				.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: 0;
-					list-style: none;
-
-					li {
-						display: flex;
-						align-items: center;
-						flex-wrap: wrap;
-						position: relative;
-
-						[data-collapse-indicator] {
-							width: 21px;
-						}
-
-						.nav-additional-action {
-							padding: 8px 10px;
-							flex: 0 auto;
-							border: 0;
-						    background: none;
-						    margin: 0 10px 0 0;
-						    width: 16px;
-						    text-align: center;
-						    box-sizing: content-box;
-						    outline: 0;
-
-							&:hover {
-								.icon {
-									color: $frame-sidebar-nav-icon-hover-color;
-								}
-							}
-
-							.icon {
-							    color: $frame-sidebar-nav-icon-color;
-							}
-						}
-
-						&.nav-parent {
-							> .nav-item {
-
-								&[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;
-									}
-							    }
-
-								.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;
-								    align-self: center;
-								    text-align: left;
-								    width: 100%;
-
-								    @include media-breakpoint-up(sm) {
-								    	font-weight: $font-weight-bold;
-								    }
-								}
-
-								.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;
-									}
-								}
-
-								.icon {
-									color: $frame-sidebar-nav-icon-color;
-								}
-							}
-						}
-
-						.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;
-
-						    .nav-item-title {
-						    	color: $frame-sidebar-nav-item-child-color;
-						    }
-
-						    &:hover,
-							&:focus {
-								outline: 0;
-
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-child-hover-color;
-								}
-							}
-
-						    &.active {
-								outline: 0;
-
-								.nav-item-title {
-									color: $frame-sidebar-nav-item-child-active-color;
-									font-weight: $font-weight-bold;
-								}
-							}
-						}
-
-						// Sub links
-						li {
-
-							&.divider {
-								margin-left: 65px;
-								margin-right: 20px;
-								border-bottom: 1px solid $frame-sidebar-nav-item-border-color;
-							}
-
-							> .nav-item {
-								padding-left: 65px;
-							}
-						}
-					}
-				}
-
-				> .nav {
-					padding: 20px 0;
-				}
-			}
-		}
-
-
-		// 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(md) {
-				background-color: $frame-sidebar-right-bg;
-			}
-
-			@include media-breakpoint-down(sm) {
-				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;
-
-					.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;
-						}
-
-						&:hover:not(.active) {
-							color: $frame-sidebar-tabs-hover-color;
-	    					border-color: $frame-sidebar-tabs-hover-border-color;
-						}
-					}
-				}
-			}
-
-			.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 {
-
-	.content-header {
-		position: relative;
-		width: 100%;
-		margin: 20px 0;
-
-		@include media-breakpoint-up(md) {
-			margin: 20px 0;
-		}
-
-		& + .content-inner {
-			margin-top: 0;
-		}
-
-		.content-header-title {
-			font-size: $h3-font-size;
-			margin-bottom: 0;
-
-			@include media-breakpoint-up(sm) {
-				font-size: $h1-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-secondary-actions {
-			font-size: 0;
-
-			&.has-content {
-				margin-top: 20px;
-				margin-bottom: 20px;
-
-				@include media-breakpoint-up(md) {
-					margin-top: 10px;
-					margin-bottom: 0;
-				}
-			}
-		}
-	}
-}

package/scss/_functions.scss

@@ -1,124 +0,0 @@
-// Functions
-// ---------------------------------------------------------------------------------------------------------------
-
-// Ascending
-// Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
-
-	$prev-key: null;
-	$prev-num: null;
-
-	@each $key, $num in $map {
-		@if $prev-num == null or unit($num) == "%" {
-			// Do nothing
-		} @else if not comparable($prev-num, $num) {
-			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-		} @else if $prev-num >= $num {
-			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-		}
-		$prev-key: $key;
-		$prev-num: $num;
-	}
-}
-
-
-// Starts at zero
-// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
-
-	$values: map-values($map);
-	$first-value: nth($values, 1);
-
-	@if $first-value != 0 {
-		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
-	}
-}
-
-
-// Make spacers
-@function spacer($key) {
-
-	@if map-has-key($spacers, $key) {
-		@return map-get($spacers, $key);
-	}
-
-	@warn "Unknown `#{$key}` in $spacers.";
-	@return null;
-}
-
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-
-// Color contrast
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-
-	@if type-of($color) == 'color' {
-
-		$r: red($color);
-		$g: green($color);
-		$b: blue($color);
-
-		$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-		@if ($yiq >= $yiq-contrasted-threshold) {
-			@return $dark;
-		} @else {
-			@return $light;
-		}
-	}
-
-	@warn "`#{$color}` is not a color.";
-	@return null;
-}
-
-
-// Color
-@function color($key) {
-
-	@if map-has-key($colors, $key) {
-		@return map-get($colors, $key);
-	}
-
-	@warn "Unknown `#{$key}` in $colors.";
-	@return null;
-}
-
-
-// Theme color
-@function theme-color($key) {
-
-	@if map-has-key($theme-colors, $key) {
-		@return map-get($theme-colors, $key);
-	}
-
-	@warn "Unknown `#{$key}` in $theme-colors.";
-	@return null;
-}
-
-// Strip unit
-@function strip-unit($number) {
-
-	@if type-of($number) == 'number' and not unitless($number) {
-		@return $number / ($number * 0 + 1);
-	}
-
-	@return $number;
-}

package/scss/_grid.scss

@@ -1,35 +0,0 @@
-// Grid
-// ---------------------------------------------------------------------------------------------------------------
-
-.container {
-    @include make-container();
-    @include make-container-max-widths();
-}
-
-.container-fluid {
-    @include make-container();
-}
-
-.container-content {
-    position: relative;
-    @include make-container-content();
-}
-
-.row {
-    @include make-row();
-}
-
-// Remove the negative margin from default .row, then the horizontal padding
-// from all immediate children columns (to prevent runaway style inheritance).
-.no-gutters {
-    margin-right: 0;
-    margin-left: 0;
-
-    > .col,
-    > [class*="col-"] {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
-@include make-grid-columns();