Copy all perfect-scroll stylesheets to a vendor library and then use it as convinience
This commit is contained in:
parent
f4e26d6aaa
commit
f3c9f3c676
@ -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'));
|
||||
});
|
||||
|
19
package.json
19
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 <jmedina@cartodb.com>",
|
||||
"Emilio García <emilio@cartodb.com>",
|
||||
"Javier Arce <javierarce@cartodb.com>"
|
||||
],
|
||||
"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",
|
||||
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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';
|
||||
|
3
src/scss/vendor/perfect-scrollbar/_main.scss
vendored
Normal file
3
src/scss/vendor/perfect-scrollbar/_main.scss
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'themes';
|
128
src/scss/vendor/perfect-scrollbar/_mixins.scss
vendored
Normal file
128
src/scss/vendor/perfect-scrollbar/_mixins.scss
vendored
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
25
src/scss/vendor/perfect-scrollbar/_themes.scss
vendored
Normal file
25
src/scss/vendor/perfect-scrollbar/_themes.scss
vendored
Normal file
@ -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);
|
||||
}
|
24
src/scss/vendor/perfect-scrollbar/_variables.scss
vendored
Normal file
24
src/scss/vendor/perfect-scrollbar/_variables.scss
vendored
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user