@finqu/cool 1.0.0

package/less/images.less

@@ -0,0 +1,242 @@
+// Images
+.image {
+    position: relative;
+    overflow: hidden;
+
+    // 24x24
+    &.img-xs {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        line-height: 24px;
+        text-align: center;
+        .fa,
+        .fas,
+        .far,
+        .fal,
+        .fab {
+            font-size: 19px;
+            line-height: 24px;
+            color: @color-icon;
+        }
+        img {
+            vertical-align: middle;
+            max-width: 24px;
+            max-height: 24px;
+            &.cover {
+                width: 24px;
+                height: 24px;
+                .object-fit(cover);
+            }
+        }
+        &.img-placeholder {
+            &:before {
+                font-size: 10px;
+            }
+        }
+    }
+
+	// 32x32
+    &.img-sm {
+        width: 32px;
+        height: 32px;
+        min-width: 32px;
+        line-height: 32px;
+        text-align: center;
+        .fa,
+        .fas,
+        .far,
+        .fal,
+        .fab {
+            font-size: 28px;
+            line-height: 32px;
+            color: @color-icon;
+        }
+        img {
+            vertical-align: middle;
+            max-width: 32px;
+            max-height: 32px;
+            &.cover {
+                width: 32px;
+                height: 32px;
+                .object-fit(cover);
+            }
+        }
+        &.img-placeholder {
+            &:before {
+                font-size: 12px;
+            }
+        }
+    }
+
+    // 50x50
+    &.img-md {
+    	width: 50px;
+        height: 50px;
+        min-width: 50px;
+        line-height: 50px;
+        text-align: center;
+        .fa,
+        .fas,
+        .far,
+        .fal,
+        .fab {
+            font-size: 56px;
+            line-height: 50px;
+            color: @color-icon;
+        }
+        img {
+            vertical-align: middle;
+            max-width: 50px;
+            max-height: 50px;
+            &.cover {
+                width: 50px;
+                height: 50px;
+                .object-fit(cover);
+            }
+        }
+        &.img-placeholder {
+            &:before {
+                font-size: 12px;
+            }
+        }
+    }
+
+    // 120x120
+    &.img-lg {
+    	width: 120px;
+        height: 120px;
+        min-width: 120px;
+        line-height: 120px;
+        text-align: center;
+        .fa,
+        .fas,
+        .far,
+        .fal,
+        .fab {
+            font-size: 92px;
+            line-height: 120px;
+            color: @color-icon;
+        }
+        img {
+            vertical-align: middle;
+            max-width: 120px;
+            max-height: 120px;
+            &.cover {
+                width: 120px;
+                height: 120px;
+                .object-fit(cover);
+            }
+        }
+        &.img-placeholder {
+            &:before {
+                font-size: 36px;
+            }
+        }
+    }
+
+    // Responsive
+    &.img-responsive {
+        display: inline-block;
+        width: auto;
+        height: auto;
+        text-align: center;
+        .fa,
+        .fas,
+        .far,
+        .fal,
+        .fab {
+            line-height: inherit;
+            color: @color-icon;
+        }
+        img {
+            display: block;
+            max-width: 100%;
+            max-height: none;
+            width: auto;
+            height: auto;
+        }
+    }
+
+    // Inline
+    &.img-inline {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    // Circle
+    &.img-circle {
+        border-radius: 50%;
+    }
+
+    // Thumbnail
+    &.img-thumbnail {
+        background-color: @color-white;
+        border: 1px solid @color-border;
+        border-radius: @border-radius;
+        padding: 1px;
+    }
+
+    // Placeholder
+    &.img-placeholder,
+    &.img-error {
+        background-color: #fafafa;
+        color: #bbb;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.4s;
+        &:before {
+            display: inline-block;
+            font-family: 'Font Awesome 5 Pro';
+            font-style: normal;
+            font-variant: normal;
+            font-weight: normal;
+            line-height: 1;
+            vertical-align: -.125em;
+            content: '\f03e';
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            opacity: 1;
+            transition: opacity 0.4s;
+        }
+        img:not(.loaded) {
+            position: absolute;
+        }
+        &.has-icon {
+            &:before {
+                content: '';
+            }
+        }
+        &.loaded {
+            background-color: @color-white;
+            &:before {
+                opacity: 0;
+                content: '';
+            }
+        }
+    }
+
+    // Hidden
+    &.img-hidden {
+        display: none;
+    }
+
+    // Bordered
+    &.img-bordered {
+        border: 1px solid rgba(0,0,0,0.15);
+    }
+}
+
+.img-fluid,
+.img-responsive {
+    display: block;
+    max-width: 100%;
+    max-height: none;
+    width: auto;
+    height: auto;
+}
+
+.img-circle {
+	border-radius: 50%;
+}

package/less/input-group.less

@@ -0,0 +1,163 @@
+// Input group
+.input-group {
+    display: flex;
+    width: 100%;
+    &.inline {
+        vertical-align: middle;
+    }
+	& + .input-group {
+	    margin-top: 10px;
+	}
+    & + label {
+        padding-top: 15px;
+    }
+    &.text-right {
+        justify-content: flex-end;
+    }
+    .form-control {
+        position: relative;
+        z-index: 2;
+        flex: 1 1 auto;
+        width: 1%;
+        margin-bottom: 0;
+    }
+    > label {
+        display: block;
+        flex: 0 0 100%;
+    }
+}
+
+.input-group-addon,
+.input-group .form-control {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.hidden {
+        display: none;
+    }
+}
+
+.input-group-addon {
+    white-space: nowrap;
+    vertical-align: middle; // Match the inputs
+}
+
+.input-group-addon:not(.btn) {
+    padding: @input-padding-y @input-padding-x;
+    margin-bottom: 0;
+    height: @input-height;
+    font-size: @font-size-base;
+    font-weight: normal;
+    line-height: @input-line-height;
+    text-align: center;
+    border-radius: @border-radius;
+    border: 1px solid @color-border;
+    background-color: @color-grey-lightest;
+    box-sizing: border-box;
+    &.input-sm {
+        padding: @input-padding-y-sm @input-padding-x-sm;
+        font-size: @font-size-small;
+        line-height: @line-height-sm;
+        height: @input-height-sm;
+    }
+    &.input-xs {
+        padding: @input-padding-y-xs @input-padding-x-xs;
+        font-size: @font-size-extra-small;
+        line-height: @line-height-xs;
+        height: @input-height-xs;
+    }
+}
+
+.input-group-addon.btn {
+    position: relative;
+    white-space: nowrap;
+    margin: 0;
+    box-sizing: border-box;
+    height: @input-height;
+    padding-top: @input-padding-y;
+    padding-bottom: @input-padding-y;
+    font-size: @font-size-base;
+    border: 1px solid @color-border;
+    background-color: @color-grey-lightest;
+    &.input-sm {
+        padding: @input-padding-y-sm @input-padding-x-sm;
+        font-size: @font-size-small;
+        line-height: @line-height-sm;
+        height: @input-height-sm;
+    }
+    &.input-xs {
+        padding: @input-padding-y-xs @input-padding-x-xs;
+        font-size: @font-size-extra-small;
+        line-height: @line-height-xs;
+        height: @input-height-xs;
+    }
+    &.btn-icon {
+        padding: @input-padding-y;
+        &.input-sm {
+            padding: @input-padding-y-sm;
+        }
+        &.input-xs {
+            padding: @input-padding-y-xs;
+        }
+    }
+    &.btn-primary {
+        background-color: @color-btn-primary;
+        color: contrast(@color-btn-primary);
+        &.focus,
+        &:focus,
+        &.hover,
+        &:hover {
+            background-color: desaturate(@color-btn-primary, 15%);
+            color: contrast(@color-btn-primary);
+            box-shadow: 0 14px 26px -12px fade(desaturate(@color-btn-primary, 15%), 42%), 0 4px 23px 0 rgba(0, 0, 0, 0.06), 0 8px 10px -5px fade(desaturate(@color-btn-primary, 15%), 20%);
+        }
+        &.disabled,
+        &[disabled] {
+            opacity: 0.25;
+            cursor: not-allowed;
+            &:hover {
+                box-shadow: none;
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+
+.input-group-addon:not(:first-child):not(:last-child),
+.input-group-btn:not(:first-child):not(:last-child),
+.input-group .form-control:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    margin-left: -1px;
+}
+
+.input-group .form-control:first-child {
+    color: @color-text;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.input-group .form-control:not(:last-child),
+.input-group-addon:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.input-group .form-control:last-child,
+.input-group-addon:last-child {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.input-group-addon + .form-control,
+.input-group-addon:last-child {
+    margin-left: -1px;
+}
+
+.input-group-addon:only-child,
+.input-group.btn:only-child,
+.input-group .form-control:only-child {
+    border-bottom-right-radius: @border-radius;
+    border-top-right-radius: @border-radius;
+    border-bottom-left-radius: @border-radius;
+    border-top-left-radius: @border-radius;
+}

package/less/list-group.less

@@ -0,0 +1,73 @@
+// List group
+
+.list-group {
+	display: flex;
+	flex-direction: column;
+	padding-left: 0;
+	margin-bottom: 0;
+	margin-top: 0;
+}
+
+.list-group-item {
+	position: relative;
+	display: flex;
+	padding: 6px 0;
+	line-height: 20px;
+	color: @color-text;
+	align-items: center;
+	flex: 1 0 auto;
+	&.active {
+		.list-group-icon.image > i {
+			color: @color-blue;
+		}
+	}
+	> a {
+		display: flex;
+		color: inherit;
+		align-items: center;
+		width: 100%;
+		flex: 1 1;
+	}
+	.list-group-icon {
+		margin-right: 10px;
+		&:not(.image) {
+			line-height: 20px;
+		}
+	}
+}
+
+.list-group-bordered:not(ul) {
+	.list-group-item {
+		border-bottom: 1px solid @border-color;
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+}
+
+ul.list-group {
+	li {
+		list-style: none;
+	}
+}
+
+ul.list-group-bordered {
+	li {
+		line-height: 0;
+	}
+	.list-group-item {
+		border-bottom: 1px solid @border-color;
+	}
+	li:last-child {
+		border-bottom: 0;
+		.list-group-item {
+			border-bottom: 0;
+		}
+	}
+}
+
+.list-group-inner-spacing {
+	.list-group-item {
+		padding: 15px;
+	}
+}

package/less/mixins/aspect-ratio.less

@@ -0,0 +1,23 @@
+.aspect-ratio(@width, @height) {
+    position: relative;
+    &:before {
+        display: block;
+        content: '';
+        width: 100%;
+        padding-top: (@height / @width) * 100%;
+    }
+    > .content {
+        position: absolute;
+        padding:10px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        span:before{
+            content:"@{width}";
+        }
+        span:after{
+            content:"@{height}";
+        }
+    }
+}

package/less/mixins/border-radius.less

@@ -0,0 +1,24 @@
+// Border radius
+.border-radius(@radius: @border-radius) {
+    border-radius: @radius;
+}
+
+.border-top-radius(@radius) {
+    border-top-left-radius: @radius;
+    border-top-right-radius: @radius;
+}
+
+.border-right-radius(@radius) {
+    border-top-right-radius: @radius;
+    border-bottom-right-radius: @radius;
+}
+
+.border-bottom-radius(@radius) {
+    border-bottom-right-radius: @radius;
+    border-bottom-left-radius: @radius;
+}
+
+.border-left-radius(@radius) {
+    border-top-left-radius: @radius;
+    border-bottom-left-radius: @radius;
+}

package/less/mixins/box-shadow.less

@@ -0,0 +1,4 @@
+// Box shadow
+.box-shadow(@shadow...) {
+	box-shadow: @shadow;
+}

package/less/mixins/buttons.less

@@ -0,0 +1,17 @@
+.btn-color(@textColor: @color-white, @backgroundColor: @color-btn-default) {
+    background: @backgroundColor;
+    color: @textColor;
+    &.hover,
+    &:hover {
+        background: darken(@backgroundColor, 15%);
+        color: @textColor;
+    }
+    &.disabled,
+    &[disabled] {
+        background: lighten(@backgroundColor, 25%);
+        cursor: not-allowed;
+        &:hover {
+            cursor: not-allowed;
+        }
+    }
+}

package/less/mixins/caret.less

@@ -0,0 +1,51 @@
+// Caret
+.caret-reset() {
+	&::after {
+		display: inline-block;
+		width: 0;
+		height: 0;
+		margin-left: @caret-width * .85;
+		font-family: 'Font Awesome 5 Pro';
+		font-weight: 300;
+	}
+	&:empty::after {
+		margin-left: 0;
+	}
+}
+
+.caret-down() {
+	.caret-reset();
+	&::after {
+    	content: '\f107';
+	}
+}
+
+.caret-up() {
+	.caret-reset();
+	&::after {
+    	content: '\f106';
+	}
+}
+
+.caret-right() {
+	.caret-reset();
+	&::after {
+    	content: '\f105';
+	}
+}
+
+.caret-left() {
+	.caret-reset();
+	&::after {
+		display: none;
+	}
+	&::before {
+		display: inline-block;
+		width: 0;
+		height: 0;
+		margin-right: @caret-width * .85;
+		font-family: 'Font Awesome 5 Pro';
+		font-weight: 300;
+		content: '\f104';
+	}
+}

package/less/mixins/clearfix.less

@@ -0,0 +1,10 @@
+.clearfix() {
+	&:before,
+	&:after {
+		content: " "; // 1
+		display: table; // 2
+	}
+	&:after {
+		clear: both;
+	}
+}

package/less/mixins/gradients.less

@@ -0,0 +1,34 @@
+// Gradients
+.gradient-bg(@color) {
+	background: @color linear-gradient(180deg, mix(@color-bg, @color, 15%), @color) repeat-x;
+}
+
+.gradient-x(@start-color: @color-grey-darker, @end-color: @color-grey-darkest, @start-percent: 0%, @end-percent: 100%) {
+	background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
+	background-repeat: repeat-x;
+}
+
+.gradient-y(@start-color: @color-grey-darker, @end-color: @color-grey-darkest, @start-percent: 0%, @end-percent: 100%) {
+	background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
+	background-repeat: repeat-x;
+}
+
+.gradient-directional(@start-color: @color-grey-darker, @end-color: @color-grey-darkest, @deg: 45deg) {
+	background-image: linear-gradient(@deg, @start-color, @end-color);
+	background-repeat: repeat-x;
+}
+.gradient-x-three-colors(@start-color: @color-blue, @mid-color: @purple, @color-stop: 50%, @end-color: @red) {
+	background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
+	background-repeat: no-repeat;
+}
+.gradient-y-three-colors(@start-color: @blue, @mid-color: @color-pink, @color-stop: 50%, @end-color: @color-red) {
+	background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
+	background-repeat: no-repeat;
+}
+.gradient-radial(@inner-color: @color-grey-darker, @outer-color: @color-grey-darkest) {
+	background-image: radial-gradient(circle, @inner-color, @outer-color);
+	background-repeat: no-repeat;
+}
+.gradient-striped(@color: fade(@color-white, .15), @angle: 45deg) {
+	background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+}

package/less/mixins/nav-divider.less

@@ -0,0 +1,7 @@
+// Divider for dropdow & lists
+.nav-divider(@color: @nav-divider-color, @margin-y: @nav-divider-margin-y) {
+	height: 0;
+	margin: @margin-y 0;
+	overflow: hidden;
+	border-top: 1px solid @color;
+}

package/less/mixins/object-fit.less

@@ -0,0 +1,13 @@
+.object-fit(@fit: fill, @position: 50% 50%) {
+    -o-object-fit: @fit;
+        object-fit: @fit;
+    -o-object-position: @position;
+        object-position: @position;
+    font-family: 'object-fit: @{fit}; object-position: @{position}';
+}
+
+.object-fit(@fit: fill) {
+    -o-object-fit: @fit;
+        object-fit: @fit;
+    font-family: 'object-fit: @{fit}';
+}

package/less/mixins/reset-text.less

@@ -0,0 +1,16 @@
+.reset-text() {
+    font-family: @font-family-base;
+    font-style: normal;
+    font-weight: @font-weight-base;
+    line-height: @line-height-base;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: normal;
+    line-break: auto;
+}

package/less/mixins.less

@@ -0,0 +1,11 @@
+// Mixins
+@import "mixins/clearfix.less";
+@import "mixins/aspect-ratio.less";
+@import "mixins/buttons.less";
+@import "mixins/object-fit.less";
+@import "mixins/reset-text.less";
+@import "mixins/border-radius.less";
+@import "mixins/box-shadow.less";
+@import "mixins/gradients.less";
+@import "mixins/nav-divider.less";
+@import "mixins/caret.less";

package/less/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "finqu-ui",
+  "version": "1.0.0",
+  "description": "Finqu UI kit",
+  "repository": {
+    "type": "git",
+    "url": "git@git.zenqu.fi:finqu-lib/finqu-ui.git"
+  },
+  "author": "",
+  "license": "ISC"
+}