@finqu/cool 1.0.0

package/less/variables.less

@@ -0,0 +1,343 @@
+// Variables
+// Colors
+@color-black:                      #000000;
+@color-white:                      #ffffff;
+@color-blue-darker:                #2491C2;
+@color-blue:                       #03A2D2;
+@color-blue-light:                 #DFF4FB;
+@color-green:                      #5eb951;
+@color-pink:                       #DE367B;
+@color-yellow:                     #ffa900;
+@color-red:                        #DA7070;
+@color-grey-darkest:               #41464F;
+@color-grey-darker:                #76848F;
+@color-grey-dark:                  #CCCCCC;
+@color-grey:                       #DDDDDD;
+@color-grey-light:                 #EEEEEE;
+@color-grey-lighter:               #F5F5F5;
+@color-grey-lightest:              #F9F9F9;
+@color-placeholder:                #9e9e9e;
+@color-bg:                         @color-white;
+@color-icon:                       @color-grey-darker;
+@color-primary:                    #283543;
+@color-secondary:                  #727b84;
+@color-dark-grey-blue:             #76848f;
+@color-grey-blue:                  #5e6a74;
+
+
+// Body
+@color-body:                       #e4e7ea;
+
+
+// Borders
+@border-radius:                    3px;
+@border-width:                     1px;
+@border-color:                     @color-grey;
+@color-border:                     @border-color; // Fallback to old variable names
+
+
+// Fonts
+@font-family-sans-serif:           'Roboto', Helvetica, Arial, sans-serif;
+@font-family-serif:                Georgia, "Times New Roman", Times, serif;
+
+@font-family-monospace:            Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base:                 @font-family-sans-serif;
+
+@font-size-large:                  16px;
+@font-size-base:                   14px;
+@font-size-small:                  12px;
+@font-size-extra-small:            10px;
+
+@font-weight-light:                300;
+@font-weight-normal:               400;
+@font-weight-bold:                 500;
+@font-weight-base:                 @font-weight-normal;
+
+@line-height-lg:                   1.5;
+@line-height-base:                 1.5;
+@line-height-sm:                   1.35;
+@line-height-xs:                   1.25;
+@line-height-computed:             floor((@font-size-base * @line-height-base)); // 21px
+
+@h1-font-size:                     floor((@font-size-base * 1.86)); // ~26px
+@h2-font-size:                     floor((@font-size-base * 1.60)); // ~22px
+@h3-font-size:                     ceil((@font-size-base * 1.35)); // ~19px
+@h4-font-size:                     ceil((@font-size-base * 1.20)); // ~17px
+@h5-font-size:                     @font-size-base;
+@h6-font-size:                     ceil((@font-size-base * 0.85)); // ~12px
+
+@headings-margin-bottom:	       (@line-height-computed / 2);
+@headings-font-family:             inherit;
+@headings-font-weight:             400;
+@headings-line-height:             1.2;
+@headings-color:                   inherit;
+
+@display1-size:                    84px;
+@display2-size:                    77px;
+@display3-size:                    63px;
+@display4-size:                    49px;
+
+@display1-weight:                  300;
+@display2-weight:                  300;
+@display3-weight:                  300;
+@display4-weight:                  300;
+@display-line-height:              @headings-line-height;
+
+@lead-font-size:                   (@font-size-base * 1.25);
+@lead-font-weight:                 300;
+
+@small-font-size:                  75%;
+@smaller-font-size:                85%;
+
+@hr-border-color:                  @border-color;
+@hr-border-width:                  @border-width;
+@hr-margin-y:                      16px;
+
+@color-text-disabled:              @color-grey-lightest;
+@color-heading:                    @color-grey-darkest;
+@color-text:                       @color-grey-darkest;
+
+
+// Box shadow
+@box-shadow-sm:                    0 17px 3px fade(@color-black, .075);
+@box-shadow:                       0 7px 14px fade(@color-black, .15);
+@box-shadow-lg:                    0 14px 42px fade(@color-black, .175);
+
+
+// Caret
+@caret-width:                      4px;
+
+
+// Forms
+@input-line-height:                1.50;
+
+@input-padding-y:                  8px;
+@input-padding-x:                  14px;
+
+@input-padding-y-sm:               6px;
+@input-padding-x-sm:               12px;
+
+@input-padding-y-xs:               4px;
+@input-padding-x-xs:               10px;
+
+@input-padding-y-lg: 			   13px;
+@input-padding-x-lg: 			   14px;
+
+@input-height:                     ((@font-size-base * @input-line-height) + (@input-padding-y * 2));
+@input-height-sm:                  ((@font-size-small * @line-height-sm) + (@input-padding-y-sm * 2));
+@input-height-xs:                  ((@font-size-extra-small * @line-height-xs) + (@input-padding-y-xs * 2));
+@input-height-lg:                  ((@font-size-large * @line-height-lg) + (@input-padding-y-lg * 2));
+
+@form-group-margin-bottom:         16px;
+@label-margin-bottom:              8px;
+
+// Buttons
+@btn-font-weight:                  normal;
+@btn-line-height:                  1.15;
+
+@btn-font-size:                    14px;
+@btn-padding-y:                    10px;
+@btn-padding-x:                    16px;
+
+@btn-font-size-sm:                 14px;
+@btn-padding-y-sm:                 8px;
+@btn-padding-x-sm:                 14px;
+
+@btn-font-size-xs:                 12px;
+@btn-padding-y-xs:                 6px;
+@btn-padding-x-xs:                 12px;
+
+@btn-font-size-lg:                 16px;
+@btn-padding-y-lg:                 16px;
+@btn-padding-x-lg:                 14px;
+
+@btn-height:                       ((@btn-font-size * @btn-line-height) + (@btn-padding-y * 2));
+@btn-height-sm:                    ((@btn-font-size-sm * @btn-line-height) + (@btn-padding-y-sm * 2));
+@btn-height-xs:                    ((@btn-font-size-xs * @btn-line-height) + (@btn-padding-y-xs * 2));
+@btn-height-lg:                    ((@btn-font-size-lg * @btn-line-height) + (@btn-padding-y-lg * 2));
+
+@color-btn-primary:                @color-primary;
+@color-btn-secondary:              @color-secondary;
+
+
+// Pagination
+@pagination-padding-y:             8px;
+@pagination-padding-x:             12px;
+
+@pagination-active-color:          @color-white;
+@pagination-active-bg:             @color-primary;
+@pagination-active-border-color:   @color-primary;
+
+@pagination-disabled-color:        @color-grey-dark;
+@pagination-disabled-bg:           @color-grey-lighter;
+@pagination-disabled-border-color: @color-border;
+
+@pagination-color:                 @color-grey-darker;
+@pagination-bg:                    @color-white;
+@pagination-border: 1px solid      @color-border;
+@pagination-line-height:           20px;
+
+@pagination-hover-color:           @color-grey-darkest;
+@pagination-hover-bg:              @color-grey-lightest;
+@pagination-hover-border-color:    @color-border;
+
+
+// Z-index
+@zindex-fixed:                     1005;
+@zindex-sticky:                    1005;
+@zindex-popover:                   1005;
+@zindex-tooltip:                   1001;
+@zindex-dropdown:                  1005;
+@zindex-select:                    1005;
+@zindex-dialog:					   1010;
+
+// Links colors
+@color-link:                       @color-blue;
+@color-hover:                      darken(@color-blue, 15%);
+
+
+// Table
+@color-table-border:               @color-grey;
+@color-table-bg:                   @color-grey-lighter;
+@color-table-bg-hover:             #ecf4f9;
+@color-table-bg-heading:           #f9f9f9;
+@color-table-a:                    @color-link;
+@color-table-a-hover:              @color-hover;
+@color-table-icon:                 @color-grey-darker;
+@color-table-bg-accent:            @color-grey-lighter;
+
+
+// Tabs
+@color-tab-bg:                     @color-white;
+@color-tab-text:                   @color-grey-darker;
+@color-tab-bg-active:              @color-white;
+@color-tab-text-active:            @color-text;
+
+
+// Tooltips
+@tooltip-font-size:                @font-size-small;
+@tooltip-max-width:                200px;
+@tooltip-color:                    @color-white;
+@tooltip-bg:                       @color-black;
+@tooltip-border-radius:            @border-radius;
+@tooltip-opacity:                  .9;
+@tooltip-padding-y:                4px;
+@tooltip-padding-x:                7px;
+@tooltip-margin:                   0;
+
+@tooltip-arrow-width:              12px;
+@tooltip-arrow-height:             6px;
+@tooltip-arrow-color:              @tooltip-bg;
+
+
+// Popovers
+@popover-font-size:                @font-size-small;
+@popover-bg:                       @color-white;
+@popover-max-width:                276px;
+@popover-border-width:             @border-width;
+@popover-border-color:             fade(@color-black, 20%);
+@popover-border-radius:            @border-radius;
+
+@popover-header-bg:                darken(@popover-bg, 3%);
+@popover-header-color:             @color-heading;
+@popover-header-padding-y:         8px;
+@popover-header-padding-x:         12px;
+
+@popover-body-color:               @color-text;
+@popover-body-padding-y:           @popover-header-padding-y;
+@popover-body-padding-x:           @popover-header-padding-x;
+
+@popover-arrow-width:              14px;
+@popover-arrow-height:             7px;
+@popover-arrow-color:              @popover-bg;
+
+@popover-arrow-outer-color:        fadein(@popover-border-color, 5%);
+
+
+// Nav divider
+@nav-divider-color:                @color-grey-light;
+@nav-divider-margin-y:             14px / 2;
+
+
+// Dropdown
+@dropdown-min-width:               140px;
+@dropdown-padding-y:               7px;
+@dropdown-spacer:                  3px;
+@dropdown-bg:                      @color-white;
+@dropdown-color:                   @color-text;
+@dropdown-border-color:            fade(@color-black, 15%);
+@dropdown-border-radius:           @border-radius;
+@dropdown-border-width:            @border-width;
+@dropdown-divider-bg:              @color-grey-light;
+@dropdown-box-shadow:              0 2px 5px fade(@color-black, 16%);
+
+@dropdown-link-color:              @color-grey-darkest;
+@dropdown-link-hover-color:        darken(@color-grey-darkest, 5%);
+@dropdown-link-hover-bg:           @color-grey-lightest;
+
+@dropdown-link-active-color:       @color-grey-darkest;
+@dropdown-link-active-bg:          @color-blue;
+
+@dropdown-link-disabled-color:     @color-grey-darker;
+
+@dropdown-item-padding-y:          5px;
+@dropdown-item-padding-x:          21px;
+
+@dropdown-header-color:            @color-grey-darker;
+
+
+// Select
+@select-spacer:                    8px;
+@select-bg:                        @color-white;
+@select-border-color:              fade(@color-black, 15%);
+@select-border-radius:             @border-radius;
+@select-border-width:              @border-width;
+@select-divider-bg:                @color-grey-light;
+@select-box-shadow:                0 2px 5px fade(@color-black, 16%);
+
+@select-item-color:                @color-grey-darkest;
+@select-item-hover-color:          darken(@color-grey-darkest, 5%);
+@select-item-hover-bg:             @color-grey-lightest;
+
+@select-item-disabled-color:       @color-grey-darker;
+
+@select-item-padding-y:            6px;
+@select-item-padding-x:            12px;
+
+@select-header-color:              @color-grey-darker;
+
+
+// Section
+@section-font-size:                @font-size-base;
+@section-border-radius:            @border-radius;
+@section-spacer:                   20px;
+@section-spacer-mobile:            10px;
+@section-padding:                  16px;
+
+@section-bg:                       @color-white;
+@section-color:                    @color-text;
+@section-box-shadow:               0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
+@section-divider-color:            @color-grey-light;
+
+@section-header-font-family:       @font-family-base;
+@section-header-font-size:         15px;
+@section-header-font-weight:       @font-weight-bold;
+@section-header-bg:                @color-white;
+@section-header-color:             @color-grey-darkest;
+@section-header-actions-color:     @color-black;
+@section-header-icons-color:       @color-grey-darkest;
+@section-header-icons-size:        15px;
+
+@section-tabs-bg:                  @color-white;
+@section-tabs-item-padding-y:      @section-padding;
+@section-tabs-item-margin-x:       @section-padding;
+@section-tabs-item-min-width:      50px;
+
+@section-tabs-color:               @color-grey-darker;
+@section-tabs-hover-color:         @color-grey-darkest;
+@section-tabs-active-color:        @color-grey-darkest;
+
+@section-tabs-border-width:        3px;
+@section-tabs-border-color:        fade(@color-black, 15%);
+@section-tabs-border-hover-color:  @color-grey-dark;
+@section-tabs-border-active-color: @color-blue;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@finqu/cool",
+  "version": "1.0.0",
+  "description": "Finqu UI package",
+  "main": "index.js",
+  "scripts": {
+    "bundlesize": "bundlesize",
+    "css": "npm-run-all css-compile css-prefix css-minify",
+    "css-main": "npm-run-all css-compile css-prefix css-minify-main",
+    "css-compile": "npm-run-all --parallel css-compile-*",
+    "css-compile-main": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/cool.scss dist/css/cool.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/cool-grid.scss dist/css/cool-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/cool-reboot.scss dist/css/cool-reboot.css",
+    "css-minify": "npm-run-all --parallel css-minify-*",
+    "css-minify-main": "cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/cool.min.css dist/css/cool.css && cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/cool-grid.min.css dist/css/cool-grid.css && cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/cool-reboot.min.css dist/css/cool-reboot.css",
+    "css-prefix": "npm-run-all --parallel css-prefix-*",
+    "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
+    "js": "npm-run-all js-compile js-minify",
+    "js-main": "npm-run-all js-lint js-compile js-minify-main",
+    "js-compile": "npm-run-all --parallel js-compile-* --sequential",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
+    "js-compile-plugins": "node build/build-plugins.js",
+    "js-compile-plugins-coverage": "cross-env NODE_ENV=test node build/build-plugins.js",
+    "js-lint": "npm-run-all --continue-on-error --parallel js-lint-*",
+    "js-lint-main": "eslint --cache --cache-location .cache/.eslintcache js/src js/tests build/",
+    "js-minify": "npm-run-all --parallel js-minify-main",
+    "js-minify-main": "npm-run-all js-minify-standalone* js-minify-bundle",
+    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/cool.js.map,includeSources,url=cool.min.js.map\" --output dist/js/cool.min.js dist/js/cool.js",
+    "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/cool.esm.js.map,includeSources,url=cool.esm.min.js.map\" --output dist/js/cool.esm.min.js dist/js/cool.esm.js",
+    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/cool.bundle.js.map,includeSources,url=cool.bundle.min.js.map\" --output dist/js/cool.bundle.min.js dist/js/cool.bundle.js",
+    "watch": "npm-run-all --parallel watch-*",
+    "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
+    "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm run js-compile\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.zenqu.fi:finqu-lib/finqu-ui.git"
+  },
+  "author": "Finqu Oy",
+  "homepage": "https://finqu.fi",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
+    "@babel/preset-env": "^7.3.1",
+    "autoprefixer": "^9.4.7",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-istanbul": "^5.1.0",
+    "broken-link-checker": "^0.7.8",
+    "bundlesize": "^0.17.1",
+    "clean-css-cli": "^4.2.1",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.13.0",
+    "find-unused-sass-variables": "^0.3.2",
+    "glob": "^7.1.3",
+    "jquery": "^3.3.1",
+    "node-sass": "^4.11.0",
+    "nodemon": "^1.18.9",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^6.1.1",
+    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "shelljs": "^0.8.3",
+    "shx": "^0.3.2",
+    "terser": "^3.17.0",
+    "uglify-js": "^3.4.9"
+  }
+}

package/scss/LISENCE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2019, Finqu Oy
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/scss/_alert.scss

@@ -0,0 +1,125 @@
+// Alert
+// ---------------------------------------------------------------------------------------------------------------
+
+.alert {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    border-left: 6px solid #fafafa;
+    border-radius: 3px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
+    width: 100%;
+    overflow: hidden;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    @include media-breakpoint-down(sm) {
+        margin-bottom: 10px;
+    }
+
+    &:hover {
+        .alert-selector {
+            color: $link-hover-color;
+        }
+    }
+
+
+    // Sizes
+    &.alert-sm {
+        & > .alert-content-container {
+            padding: 10px;
+            font-size: 80%;
+        }
+    }
+
+    &.alert-lg {
+        & > .alert-icon {
+            padding-left: 25px;
+            font-size: 22px;
+            &:after {
+                width: 47px;
+            }
+        }
+
+        & > .alert-content-container {
+            padding: 25px;
+        }
+    }
+
+
+    // Icon
+    .alert-icon {
+        color: $icon-color;
+        padding-left: 15px;
+        margin-left: -6px;
+        z-index: 1;
+        box-sizing: border-box;
+        font-size: 20px;
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            z-index: -1;
+            width: 34px;
+            background: #fafafa;
+        }
+    }
+
+
+    // Content
+    .alert-content-container {
+        display: flex;
+        align-items: center;
+        background: #fafafa;
+        flex: 1;
+        padding: 15px;
+        box-sizing: border-box;
+        @include media-breakpoint-down(sm) {
+            flex-wrap: wrap;
+        }
+
+        .alert-content {
+            flex: 1;
+            @include media-breakpoint-down(sm) {
+                flex: 0 1 auto
+            }
+            & + .alert-action {
+                margin-left: 15px;
+                @include media-breakpoint-down(sm) {
+                    margin-top: 15px;
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+
+    // Alert selector
+    .alert-selector {
+        text-align: right;
+        margin-right: 15px;
+        width: 30px;
+        font-size: 22px;
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            z-index: -1;
+            width: 30px;
+            background: #fafafa;
+            padding-left: 15px;
+        }
+    }
+}
+
+// Alert variants
+@each $color, $value in $theme-colors {
+    .alert-#{$color} {
+        @include alert-variant($value);
+    }
+}

package/scss/_badge.scss

@@ -0,0 +1,58 @@
+// Badge
+// ---------------------------------------------------------------------------------------------------------------
+
+.badge {
+    display: inline-block;
+    font-size: $badge-font-size;
+    font-weight: $badge-font-weight;
+    padding: $badge-padding-y $badge-padding-x;
+    line-height: $badge-line-height;
+    border-radius: $badge-border-radius;
+    border: none;
+    box-sizing: border-box;
+    margin: 2px;
+    text-align: center;
+    text-decoration: none;
+    touch-action: manipulation;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+
+    &.badge-xs {
+        font-size: $badge-xs-font-size;
+        font-weight: $badge-xs-font-weight;
+        padding: $badge-xs-padding-y $badge-xs-padding-x;
+        line-height: $badge-xs-line-height;
+    }
+
+    &.badge-sm {
+        font-size: $badge-sm-font-size;
+        font-weight: $badge-sm-font-weight;
+        padding: $badge-sm-padding-y $badge-sm-padding-x;
+        line-height: $badge-sm-line-height;
+    }
+}
+
+@each $color, $value in $colors {
+    .badge-#{$color} {
+        @include badge-variant($value);
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .badge-#{$color} {
+        @include badge-variant($value);
+    }
+}
+
+@each $color, $value in $colors {
+    .badge-outline-#{$color} {
+        @include badge-outline-variant($value);
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .badge-outline-#{$color} {
+        @include badge-outline-variant($value);
+    }
+}