From f3c9f3c67623b460c5a806cf7be56c13353e65ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Wed, 24 May 2017 18:40:19 +0200 Subject: [PATCH] Copy all perfect-scroll stylesheets to a vendor library and then use it as convinience --- Gulpfile.js | 8 ++ package.json | 19 ++- src/fonts/cartoIcon.eot | Bin 20864 -> 20864 bytes src/fonts/cartoIcon.ttf | Bin 20692 -> 20692 bytes src/fonts/cartoIcon.woff | Bin 13020 -> 13020 bytes src/scss/entry.scss | 2 +- src/scss/vendor/perfect-scrollbar/_main.scss | 3 + .../vendor/perfect-scrollbar/_mixins.scss | 128 ++++++++++++++++++ .../vendor/perfect-scrollbar/_themes.scss | 25 ++++ .../vendor/perfect-scrollbar/_variables.scss | 24 ++++ 10 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 src/scss/vendor/perfect-scrollbar/_main.scss create mode 100644 src/scss/vendor/perfect-scrollbar/_mixins.scss create mode 100644 src/scss/vendor/perfect-scrollbar/_themes.scss create mode 100644 src/scss/vendor/perfect-scrollbar/_variables.scss diff --git a/Gulpfile.js b/Gulpfile.js index 5206f7e..e3dc0ee 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -1,4 +1,5 @@ var gulp = require('gulp'); +var rename = require("gulp-rename"); var iconfont = require('gulp-iconfont'); var iconfontCss = require('gulp-iconfont-css'); @@ -25,4 +26,11 @@ gulp.task('default', function () { })) .pipe(gulp.dest('src/fonts/')); + + gulp + .src('./node_modules/perfect-scrollbar/src/css/*') + .pipe(rename(function (path) { + path.basename = '_' + path.basename; + })) + .pipe(gulp.dest('./src/scss/vendor/perfect-scrollbar')); }); diff --git a/package.json b/package.json index a6c7113..7896419 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,12 @@ { "name": "cartoassets", - "description": "Share frontend assets between different CartoDB repositories", - "version": "0.1.34", + "description": "Share frontend assets between different CARTO repositories", + "version": "0.2.00", "homepage": "https://github.com/cartodb/CartoAssets", "author": { - "name": "CartoDB", - "email": "contact@cartodb.com" + "name": "CARTO", + "email": "frontend@carto.com" }, - "contributors": [ - "Javier Álvarez ", - "Emilio García ", - "Javier Arce " - ], "repository": { "type": "git", "url": "git://github.com/cartodb/CartoAssets.git" @@ -45,13 +40,15 @@ "gulp-iconfont": "1.0.0", "gulp-iconfont-css": "0.0.9", "gulp-install": "0.2.0", + "gulp-rename": "1.2.2", "gulp-sketch": "0.0.7", "grunt-shell": "1.1.2", - "load-grunt-tasks": "*" + "load-grunt-tasks": "*", + "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master" }, "keywords": [ "library", - "CartoDB", + "CARTO", "share", "assets", "styleguide", diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 1bd1bbca5b5d45f6e0313684484d5aed9191174e..35d6d5bd491ec490b879271113befe4d8d3daa94 100644 GIT binary patch delta 55 zcmZoz%-FD)ae@uArOMQa_Uo8ibyOyPm?}M0#WJ4X<|_j?<1YpvxawUx7e;Sh!1%x) E01*%q4*&oF delta 55 zcmZoz%-FD)ae@tVqu8{G_Uo8iHZx58Fjab*SYtfD%~u9)#$OCTaMjzA8%A$l!1%x) E03fpxO8@`> diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 0ec55ebb23506b4defea47089d1baad654db474c..97e08a707911c418c4f2fc920734d22b0bad0559 100644 GIT binary patch delta 47 wcmcbzknzew#tDwhtvV_bU8YJ;Rk4icxB1Gz&G?G}2(EgU&V|t%zdY~<0E)v9>Hq)$ delta 47 wcmcbzknzew#tDwhEt?r8x=fXxCe|3wZ}XLboADO|5M1@Pi_@% diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 0ccc97c68c8cdc08a8aa89bd0a5fe20f0f713f63..e3068b5f111e3c1cb0b3e570c51e2e26eaab9849 100644 GIT binary patch delta 67 zcmV-J0KEU)W!z<6k)jPT{;&=zbXI! ZohyRz50J~jzyuNn0GNahw6k|BWe4bM9fAM= delta 67 zcmV-J0KEU)W!z1We3o&9Bcpp diff --git a/src/scss/entry.scss b/src/scss/entry.scss index cf61d2f..db1e8d6 100644 --- a/src/scss/entry.scss +++ b/src/scss/entry.scss @@ -12,7 +12,7 @@ @import 'cdb-utilities/fonts'; @import 'cdb-utilities/helpers'; -@import 'node_modules/perfect-scrollbar/src/css/main'; // Perfect scrollbar styles +@import 'vendor/perfect-scrollbar/main'; // Perfect scrollbar styles @import 'cdb-components/forms/checkbox'; @import 'cdb-components/forms/dropdowns'; diff --git a/src/scss/vendor/perfect-scrollbar/_main.scss b/src/scss/vendor/perfect-scrollbar/_main.scss new file mode 100644 index 0000000..ae1f655 --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_main.scss @@ -0,0 +1,3 @@ +@import 'variables'; +@import 'mixins'; +@import 'themes'; diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss new file mode 100644 index 0000000..79d3d2c --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss @@ -0,0 +1,128 @@ +@mixin scrollbar-rail-default($theme) { + display: none; + position: absolute; /* please don't change 'position' */ + opacity: map_get($theme, rail-default-opacity); + transition: background-color .2s linear, opacity .2s linear; +} + +@mixin scrollbar-rail-hover($theme) { + background-color: map_get($theme, rail-hover-bg); + opacity: map_get($theme, rail-hover-opacity); +} + +@mixin scrollbar-default($theme) { + position: absolute; /* please don't change 'position' */ + background-color: map_get($theme, bar-container-hover-bg); + border-radius: map_get($theme, border-radius); + transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, + border-radius .2s ease-in-out; +} + +@mixin scrollbar-hover($theme) { + background-color: map_get($theme, bar-hover-bg); +} + +@mixin in-scrolling($theme) { + &.ps-in-scrolling { + &.ps-x > .ps-scrollbar-x-rail { + @include scrollbar-rail-hover($theme); + > .ps-scrollbar-x { + @include scrollbar-hover($theme); + height: map_get($theme, scrollbar-x-hover-height); + } + } + &.ps-y > .ps-scrollbar-y-rail { + @include scrollbar-rail-hover($theme); + > .ps-scrollbar-y { + @include scrollbar-hover($theme); + width: map_get($theme, scrollbar-y-hover-width); + } + } + } +} + +// Layout and theme mixin +@mixin ps-container($theme) { + -ms-touch-action: auto; + touch-action: auto; + overflow: hidden !important; + -ms-overflow-style: none; + + // Edge + @supports (-ms-overflow-style: none) { + overflow: auto !important; + } + // IE10+ + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + overflow: auto !important; + } + + &.ps-active-x > .ps-scrollbar-x-rail, + &.ps-active-y > .ps-scrollbar-y-rail { + display: block; + background-color: map_get($theme, bar-bg); + } + + @include in-scrolling($theme); + + > .ps-scrollbar-x-rail { + @include scrollbar-rail-default($theme); + bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: map_get($theme, scrollbar-x-rail-height); + + > .ps-scrollbar-x { + @include scrollbar-default($theme); + bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */ + height: map_get($theme, scrollbar-x-height); + } + &:hover, + &:active { + > .ps-scrollbar-x { + height: map_get($theme, scrollbar-x-hover-height); + } + } + } + + > .ps-scrollbar-y-rail { + @include scrollbar-rail-default($theme); + right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */ + width: map_get($theme, scrollbar-y-rail-width); + + > .ps-scrollbar-y { + @include scrollbar-default($theme); + right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */ + width: map_get($theme, scrollbar-y-width); + } + &:hover, + &:active { + > .ps-scrollbar-y { + width: map_get($theme, scrollbar-y-hover-width); + } + } + } + + &:hover { + @include in-scrolling($theme); + + > .ps-scrollbar-x-rail, + > .ps-scrollbar-y-rail { + opacity: map_get($theme, rail-container-hover-opacity); + } + + > .ps-scrollbar-x-rail:hover { + @include scrollbar-rail-hover($theme); + + > .ps-scrollbar-x { + @include scrollbar-hover($theme); + } + } + + > .ps-scrollbar-y-rail:hover { + @include scrollbar-rail-hover($theme); + + > .ps-scrollbar-y { + @include scrollbar-hover($theme); + } + } + } +} diff --git a/src/scss/vendor/perfect-scrollbar/_themes.scss b/src/scss/vendor/perfect-scrollbar/_themes.scss new file mode 100644 index 0000000..bf7729a --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_themes.scss @@ -0,0 +1,25 @@ +$ps-theme-default: ( + border-radius: $ps-border-radius, + rail-default-opacity: $ps-rail-default-opacity, + rail-container-hover-opacity: $ps-rail-container-hover-opacity, + rail-hover-opacity: $ps-rail-hover-opacity, + bar-bg: $ps-bar-bg, + bar-container-hover-bg: $ps-bar-container-hover-bg, + bar-hover-bg: $ps-bar-hover-bg, + rail-hover-bg: $ps-rail-hover-bg, + scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, + scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, + scrollbar-x-bottom: $ps-scrollbar-x-bottom, + scrollbar-x-height: $ps-scrollbar-x-height, + scrollbar-x-hover-height: $ps-scrollbar-x-hover-height, + scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, + scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, + scrollbar-y-right: $ps-scrollbar-y-right, + scrollbar-y-width: $ps-scrollbar-y-width, + scrollbar-y-hover-width: $ps-scrollbar-y-hover-width, +); + +// Default theme +.ps-container { + @include ps-container($ps-theme-default); +} diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss new file mode 100644 index 0000000..7454fb0 --- /dev/null +++ b/src/scss/vendor/perfect-scrollbar/_variables.scss @@ -0,0 +1,24 @@ +// Colors +$ps-border-radius: 6px !default; + +$ps-rail-default-opacity: 0 !default; +$ps-rail-container-hover-opacity: 0.6 !default; +$ps-rail-hover-opacity: 0.9 !default; + +$ps-bar-bg: transparent !default; +$ps-bar-container-hover-bg: #aaa !default; +$ps-bar-hover-bg: #999 !default; +$ps-rail-hover-bg: #eee !default; + +// Sizes +$ps-scrollbar-x-rail-bottom: 0px !default; +$ps-scrollbar-x-rail-height: 15px !default; +$ps-scrollbar-x-bottom: 2px !default; +$ps-scrollbar-x-height: 6px !default; +$ps-scrollbar-x-hover-height: 11px !default; + +$ps-scrollbar-y-rail-right: 0 !default; +$ps-scrollbar-y-rail-width: 15px !default; +$ps-scrollbar-y-right: 2px !default; +$ps-scrollbar-y-width: 6px !default; +$ps-scrollbar-y-hover-width: 11px !default;