@finqu/cool 1.0.0

package/scss/_frame.scss

@@ -0,0 +1,523 @@
+// 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: 10px 0;
+
+		    	@include media-breakpoint-up(md) {
+					margin: 20px 0;
+				}
+		    }
+
+		    .content-header {
+				position: relative;
+				width: 100%;
+				margin: 10px 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;
+				}
+			}
+		}
+
+
+		// 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);
+				}
+
+				.nav {
+					position: relative;
+					margin: 0;
+					padding: 0;
+					list-style: none;
+
+					li {
+						display: block;
+						position: relative;
+
+						&.has-additional-link {
+							> a:not(.additional-link) {
+								width: calc(100% - 60px);
+							}
+
+							.additional-link {
+								position: relative;
+								width: 16px;
+								height: 25px;
+								box-sizing: content-box;
+								vertical-align: top;
+
+								&:hover {
+									.icon {
+										color: $frame-sidebar-nav-icon-hover-color;
+									}
+								}
+
+								.icon {
+									display: flex;
+								    align-items: center;
+								    justify-content: flex-end;
+								    height: 100%;
+								    margin-left: 6px;
+								    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;
+
+									& + span {
+										margin-left: 20px;
+									}
+								}
+
+								.icon {
+									color: $frame-sidebar-nav-icon-color;
+								}
+							}
+						}
+
+						.nav-item {
+							position: relative;
+							display: inline-flex;
+							flex-basis: auto;
+							flex-grow: 1;
+							width: 100%;
+							cursor: pointer;
+						    padding: 8px 20px;
+						    margin: 0;
+						    opacity: .85;
+						    border: 0;
+						    background: none;
+						    outline: 0;
+
+						    .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: 67px;
+								margin-right: 20px;
+								border-bottom: 1px solid $frame-sidebar-nav-item-border-color;
+							}
+
+							> .nav-item {
+								padding-left: 67px;
+							}
+						}
+					}
+				}
+
+				> .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: 10px 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;
+		}
+	}
+}

package/scss/_functions.scss

@@ -0,0 +1,114 @@
+// 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;
+}

package/scss/_grid.scss

@@ -0,0 +1,35 @@
+// 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();