@finqu/cool 1.0.0

package/scss/_tabs.scss

@@ -0,0 +1,175 @@
+// Tabs
+// ---------------------------------------------------------------------------------------------------------------
+
+.tabs {
+    margin: 0 0 20px 0;
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 0;
+    display: flex;
+    box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
+    background-color: color('white');
+    align-items: flex-end;
+    border-radius: $border-radius;
+
+    > li,
+    > div {
+        background: $tabs-bg;
+        display: inline-block;
+        list-style: none;
+        user-select: none;
+        font-size: $font-size-base;
+        margin: 0;
+        text-align: center;
+        border-bottom: 1px solid $border-color;
+        background: color('white');
+        overflow: hidden;
+        flex-grow: 1;
+
+        &:hover {
+            > span,
+            > a {
+                color: color('grey-darkest');
+                border-color: color('grey-dark');
+            }
+        }
+
+        &.active {
+            > span,
+            > a {
+                color: color('grey-darkest');
+                border-color: color('blue');
+            }
+        }
+
+        &:not(:last-child) {
+            margin-right: -1px;
+        }
+
+        > a,
+        > span {
+            color: $tabs-text-color;
+            cursor: pointer;
+            display: block;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: color('grey-darker');
+            border-bottom: 3px solid transparent;
+            padding: 10px 16px 7px 16px;
+        }
+    }
+}
+
+.tab-toggle {
+    display: none;
+    @include media-breakpoint-down(sm) {
+        display: block;
+    }
+}
+
+.tab-content {
+    border-radius: $border-radius;
+
+    & + .tab-content {
+        margin-top: 20px;
+    }
+
+    &.with-background {
+        background: white;
+        padding: 10px;
+    }
+
+    &.has-table {
+        padding: 0;
+        border: none;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+
+    .tabs {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        position: relative;
+        z-index: 19;
+        flex: 1 1 auto;
+        padding: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        border-radius: $border-radius;
+        border: 0;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+
+        span {
+            height: 40px;
+        }
+
+        > li,
+        > div {
+            display: none;
+            flex: 1 0 100%;
+            border-radius: $border-radius;
+            border: 0;
+            height: 40px;
+            text-align: center;
+            max-width: 100%;
+            text-align: left;
+
+            &.active {
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                order: -1;
+            }
+
+            &:hover:not(.active) {
+                background-color: color('grey-lightest');
+                > a {
+                    border-color: transparent;
+                }
+            }
+        }
+    }
+
+    .tab-toggle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        height: 40px;
+        display: block;
+        line-height: 40px;
+        text-align: right;
+        border: none;
+        border-radius: $border-radius;
+        background: transparent;
+        background-color: transparent;
+        z-index: 100;
+
+        .icon {
+            margin-right: 15px;
+            color: color('grey-darkest');
+        }
+    }
+
+    .tabs-container {
+        position: relative;
+
+        &.open {
+            .tabs {
+                > li,
+                > div {
+                    display: block;
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+}

package/scss/_toast.scss

@@ -0,0 +1,182 @@
+// Toast
+// ---------------------------------------------------------------------------------------------------------------
+
+.toast {
+	position: absolute;
+	display: block;
+	z-index: $zindex-toast;
+	opacity: 0;
+	transition: opacity 0.25s;
+
+	&.show {
+		opacity: 1;
+	}
+}
+
+.toast-inner {
+	background-clip: padding-box;
+	border-radius: $toast-border-radius;
+	font-size: $toast-font-size;
+	word-wrap: break-word;
+	@include reset-text;
+}
+
+.toast-header {
+	display: flex;
+    align-items: center;
+    justify-content: space-between;
+	padding: $toast-header-padding-y $toast-header-padding-x;
+	margin-top: 0;
+	margin-bottom: 0;
+	font-size: $font-size-base;
+	border-width: $toast-border-width;
+	border-style: solid;
+	border-top-left-radius: calc(#{$border-radius} - #{$toast-border-width});
+	border-top-right-radius: calc(#{$border-radius} - #{$toast-border-width});
+
+	span {
+		font-weight: $font-weight-bold;
+	}
+
+	button[data-toast-close] {
+        background-color: transparent;
+        border: 0;
+        opacity: 0.75;
+        line-height: 0;
+        padding: 0;
+
+        svg {
+        	pointer-events: none;
+        }
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+            outline: 0
+        }
+    }
+
+	&:empty {
+		display: none;
+	}
+}
+
+.toast-body {
+	display: flex;
+    align-items: center;
+    justify-content: space-between;
+	padding: $toast-body-padding-y $toast-body-padding-x;
+	-webkit-font-smoothing: subpixel-antialiased;
+
+	button[data-toast-close] {
+        background-color: transparent;
+        border: 0;
+        opacity: 0.75;
+        line-height: 0;
+        padding: 0;
+        margin-left: $toast-body-padding-x;
+
+        svg {
+        	pointer-events: none;
+        }
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+            outline: 0
+        }
+    }
+}
+
+
+// Themes
+.toast-light {
+	.toast-inner {
+		background-color: $toast-bg-light;
+
+		.toast-header {
+			color: $toast-header-color-light;
+			background-color: $toast-header-bg-light;
+			border-color: $toast-header-bg-light;
+
+			button[data-toast-close] {
+				color: $toast-header-color-light;
+			}
+		}
+
+		.toast-body {
+			color: $toast-body-color-light;
+
+			button[data-toast-close] {
+				color: $toast-body-color-light;
+			}
+		}
+	}
+}
+
+.toast-dark {
+	.toast-inner {
+		background-color: $toast-bg-dark;
+
+		.toast-header {
+			color: $toast-header-color-dark;
+			background-color: $toast-header-bg-dark;
+			border-color: $toast-header-bg-dark;
+
+			button[data-toast-close] {
+				color: $toast-header-color-dark;
+			}
+		}
+
+		.toast-body {
+			color: $toast-body-color-dark;
+
+			button[data-toast-close] {
+				color: $toast-body-color-dark;
+			}
+		}
+	}
+}
+
+
+// Sizes
+.toast-sm {
+    .toast-inner {
+    	.toast-header {
+			padding: $toast-header-padding-y-sm $toast-header-padding-x-sm;
+			font-size: $toast-font-size-sm;
+    	}
+
+    	.toast-body {
+    		padding: $toast-body-padding-y-sm $toast-body-padding-x-sm;
+			font-size: $toast-font-size-sm;
+
+			button[data-toast-close] {
+				margin-left: $toast-body-padding-x-sm;
+			}
+    	}
+    }
+}
+
+.toast-lg {
+    .toast-inner {
+    	.toast-header {
+			padding: $toast-header-padding-y-lg $toast-header-padding-x-lg;
+			font-size: $toast-font-size-lg;
+
+			span {
+				font-weight: $font-weight-normal;
+			}
+    	}
+
+    	.toast-body {
+    		padding: $toast-body-padding-y-lg $toast-body-padding-x-lg;
+			font-size: $toast-font-size-lg;
+			font-weight: $font-weight-light;
+
+			button[data-toast-close] {
+				margin-left: $toast-body-padding-x-lg;
+			}
+    	}
+    }
+}

package/scss/_tooltip.scss

@@ -0,0 +1,101 @@
+// Tooltip
+// ---------------------------------------------------------------------------------------------------------------
+
+.tooltip {
+	position: fixed;
+	z-index: $zindex-tooltip;
+	display: block;
+	margin: $tooltip-margin;
+	font-size: $tooltip-font-size;
+	word-wrap: break-word;
+	opacity: 0;
+	-webkit-font-smoothing: subpixel-antialiased;
+	@include reset-text;
+
+	&.show {
+		opacity: $tooltip-opacity;
+	}
+
+	.arrow {
+		position: absolute;
+		display: block;
+		width: $tooltip-arrow-width;
+		height: $tooltip-arrow-height;
+
+		&::before {
+			position: absolute;
+			content: '';
+			border-color: transparent;
+			border-style: solid;
+		}
+	}
+}
+
+.tooltip-top {
+	padding: $tooltip-arrow-height 0;
+
+	.arrow {
+		bottom: 0;
+
+		&::before {
+			top: 0;
+			border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+			border-top-color: $tooltip-arrow-color;
+		}
+	}
+}
+
+.tooltip-right {
+	padding: 0 $tooltip-arrow-height;
+
+	.arrow {
+		left: 0;
+		width: $tooltip-arrow-height;
+		height: $tooltip-arrow-width;
+
+		&::before {
+			right: 0;
+			border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+			border-right-color: $tooltip-arrow-color;
+		}
+	}
+}
+
+.tooltip-bottom {
+	padding: $tooltip-arrow-height 0;
+
+	.arrow {
+		top: 0;
+
+		&::before {
+			bottom: 0;
+			border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+			border-bottom-color: $tooltip-arrow-color;
+		}
+	}
+}
+
+.tooltip-left {
+	padding: 0 $tooltip-arrow-height;
+
+	.arrow {
+		right: 0;
+		width: $tooltip-arrow-height;
+		height: $tooltip-arrow-width;
+
+		&::before {
+			left: 0;
+			border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+			border-left-color: $tooltip-arrow-color;
+		}
+	}
+}
+
+.tooltip-inner {
+	max-width: $tooltip-max-width;
+	padding: $tooltip-padding-y $tooltip-padding-x;
+	color: $tooltip-color;
+	text-align: center;
+	background-color: $tooltip-bg;
+	border-radius: $tooltip-border-radius;
+}

package/scss/_type.scss

@@ -0,0 +1,90 @@
+// Type
+// ---------------------------------------------------------------------------------------------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+    margin-top: 0;
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
+}
+
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
+
+.lead {
+    font-size: $lead-font-size;
+    font-weight: $lead-font-weight;
+}
+
+
+// Cool headings
+.display-1 {
+    font-size: $display1-size;
+    font-weight: $display1-weight;
+    line-height: $display-line-height;
+}
+.display-2 {
+    font-size: $display2-size;
+    font-weight: $display2-weight;
+    line-height: $display-line-height;
+}
+.display-3 {
+    font-size: $display3-size;
+    font-weight: $display3-weight;
+    line-height: $display-line-height;
+}
+.display-4 {
+    font-size: $display4-size;
+    font-weight: $display4-weight;
+    line-height: $display-line-height;
+}
+
+
+// Emphasis
+small,
+.small {
+    font-size: $small-font-size;
+    font-weight: $font-weight-normal;
+}
+
+.font-weight-light {
+    font-weight: $font-weight-light;
+}
+
+.font-weight-lighter {
+    font-weight: $font-weight-lighter;
+}
+
+.font-weight-normal {
+    font-weight: $font-weight-normal;
+}
+
+.font-weight-bold {
+    font-weight: $font-weight-bold;
+}
+
+.font-weight-bolder {
+    font-weight: $font-weight-bolder;
+}
+
+
+// Hr
+hr {
+    margin-top: $hr-margin-y;
+    margin-bottom: $hr-margin-y;
+    border: 0;
+    border-top: $hr-border-width solid $hr-border-color;
+}
+
+
+// Icon spacing
+.icon-spacer {
+    margin-right: $icon-spacer;
+}

package/scss/_utilities.scss

@@ -0,0 +1,21 @@
+// Utilities
+// ---------------------------------------------------------------------------------------------------------------
+
+@import "utilities/align";
+@import "utilities/animate";
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/clearfix";
+@import "utilities/cursor";
+@import "utilities/display";
+@import "utilities/embed";
+@import "utilities/flex";
+@import "utilities/lazyload";
+@import "utilities/overflow";
+@import "utilities/perfect-scrollbar";
+@import "utilities/placeholder";
+@import "utilities/position";
+@import "utilities/sizing";
+@import "utilities/spacing";
+@import "utilities/text";
+@import "utilities/collapse";