cartodb4
/
CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Copy all perfect-scroll stylesheets to a vendor library and then use it as convinience

Browse Source
pull/162/head
Javier Álvarez Medina 7 years ago
parent f4e26d6aaa
commit f3c9f3c676
10 changed files with 197 additions and 12 deletions
Show Stats Download Patch File Download Diff File

8
Gulpfile.js
Unescape View File

@ -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
Unescape View File

@ -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",

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

2
src/scss/entry.scss
Unescape View File

@ -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
Unescape View File

@ -0,0 +1,3 @@
@import 'variables';
@import 'mixins';
@import 'themes';

128
src/scss/vendor/perfect-scrollbar/_mixins.scss vendored
Unescape View 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
Unescape View 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
Unescape View 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;
Write Preview
Loading…
Cancel
Save