@finqu/cool 1.0.0

package/less/tabs.less

@@ -0,0 +1,162 @@
+// Tabs
+.tabs {
+    margin: 0 0 20px 0;
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 0;
+    display: flex;
+    border-radius: @border-radius;
+    box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
+    background-color: @color-white;
+    align-items: flex-end;
+    > li,
+    > div {
+        background: @color-tab-bg;
+        display: inline-block;
+        list-style: none;
+        user-select: none;
+        font-size: @font-size-base;
+        margin: 0;
+        text-align: center;
+        border-bottom: 1px solid fade(@color-black, 15%);
+        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: @color-tab-text;
+            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;
+    @media screen and (max-width: 767px) {
+        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;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .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;
+        .fa,
+        .fas,
+        .far,
+        .fal,
+        .fab {
+            margin-right: 15px;
+            color: @color-grey-darkest;
+        }
+    }
+
+    .tabs-container {
+        position: relative;
+        &.open {
+            .tabs {
+                > li,
+                > div {
+                    display: block;
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+}

package/less/tooltip.less

@@ -0,0 +1,87 @@
+// Tooltip
+.tooltip {
+	position: fixed;
+	z-index: @zindex-tooltip;
+	display: block;
+	margin: @tooltip-margin;
+	.reset-text();
+	font-size: @tooltip-font-size;
+	word-wrap: break-word;
+	opacity: 0;
+	&.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/less/type.less

@@ -0,0 +1,71 @@
+// 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;
+}
+
+.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;
+}
+
+.light {
+    font-weight: @font-weight-light;
+}
+
+.regular,
+.normal {
+    font-weight: @font-weight-normal;
+}
+
+.bold,
+strong,
+b {
+    font-weight: @font-weight-bold;
+}
+
+small,
+.small {
+    font-size: @small-font-size;
+    font-weight: @font-weight-normal;
+}
+
+hr {
+    margin-top: @hr-margin-y;
+    margin-bottom: @hr-margin-y;
+    border: 0;
+    border-top: @hr-border-width solid @hr-border-color;
+}

package/less/utilities/align.less

@@ -0,0 +1,27 @@
+// Align
+.align-left {
+    display: block;
+    margin: 0 auto 0 0;
+}
+
+.align-center {
+    display: block;
+    margin: 0 auto;
+}
+
+.align-right {
+    display: block;
+    margin: 0 0 0 auto
+}
+
+.align-top {
+    vertical-align: top;
+}
+
+.align-middle {
+    vertical-align: middle;
+}
+
+.align-bottom {
+    vertical-align: bottom;
+}