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

Merge pull request #162 from CartoDB/entry-point

Browse Source 
Chaning way to load CartoAssets stylesheets
This commit is contained in:
Javier Álvarez Medina 2017-05-25 16:47:23 +02:00 committed by GitHub
commit f8529d15a5
55 changed files with 381 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Gulpfile.js
View File

@ -1,21 +1,22 @@
var gulp = require('gulp');
var rename = require("gulp-rename");
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
String.prototype.toCamelCase = function() {
return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
String.prototype.toCamelCase = function () {
return this.replace(/^([A-Z])|\s(\w)/g, function (match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});
};
gulp.task('default', function(){
gulp.task('default', function () {
gulp.src(['./icon-font/svgs/*.svg'])
.pipe(iconfontCss({
fontName: 'cartoIcon',
path: './icon-font/template.jst.ejs',
targetPath: '../scss/cdb-icon-font.scss',
targetPath: '../scss/_cdb-icon-font.scss',
fontPath: '../../fonts/'
}))
@ -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'));
});

2
icon-font/template.jst.ejs
View File

@ -43,7 +43,7 @@ All available icons in CartoDB.
<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-<%= name %> Size-large"></i>
<h4 class="Text Size-small"><%= name %></h4>
<h4 class="Text Size-small u-tSpace--m"><%= name %></h4>
</div>
<% }); %>
```

21
package.json
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"
@ -33,7 +28,7 @@
"jquery": "~2.2.0",
"highlight.js": "~9.1.0",
"markdown-styleguide-generator": "~2.0.4",
"grunt-sass": "1.1.0",
"grunt-sass": "2.0.0",
"grunt-contrib-clean": "0.7.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-cssmin": "0.14.0",
@ -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.

224
src/scss/cdb-icon-font.scss → src/scss/_cdb-icon-font.scss
View File

@ -43,673 +43,673 @@ All available icons in CartoDB.
<div class="box">
<i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
<h4 class="Text Size-small">clock</h4>
<h4 class="Text Size-small u-tSpace--m">clock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-stats Size-large"></i>
<h4 class="Text Size-small">stats</h4>
<h4 class="Text Size-small u-tSpace--m">stats</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-heartEmpty Size-large"></i>
<h4 class="Text Size-small">heartEmpty</h4>
<h4 class="Text Size-small u-tSpace--m">heartEmpty</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-heartFill Size-large"></i>
<h4 class="Text Size-small">heartFill</h4>
<h4 class="Text Size-small u-tSpace--m">heartFill</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-alert Size-large"></i>
<h4 class="Text Size-small">alert</h4>
<h4 class="Text Size-small u-tSpace--m">alert</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rows Size-large"></i>
<h4 class="Text Size-small">rows</h4>
<h4 class="Text Size-small u-tSpace--m">rows</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-check Size-large"></i>
<h4 class="Text Size-small">check</h4>
<h4 class="Text Size-small u-tSpace--m">check</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dribbble Size-large"></i>
<h4 class="Text Size-small">dribbble</h4>
<h4 class="Text Size-small u-tSpace--m">dribbble</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-twitter Size-large"></i>
<h4 class="Text Size-small">twitter</h4>
<h4 class="Text Size-small u-tSpace--m">twitter</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-caretDown Size-large"></i>
<h4 class="Text Size-small">caretDown</h4>
<h4 class="Text Size-small u-tSpace--m">caretDown</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lightbulb Size-large"></i>
<h4 class="Text Size-small">lightbulb</h4>
<h4 class="Text Size-small u-tSpace--m">lightbulb</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-explore Size-large"></i>
<h4 class="Text Size-small">explore</h4>
<h4 class="Text Size-small u-tSpace--m">explore</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-drop Size-large"></i>
<h4 class="Text Size-small">drop</h4>
<h4 class="Text Size-small u-tSpace--m">drop</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
<h4 class="Text Size-small">edition</h4>
<h4 class="Text Size-small u-tSpace--m">edition</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
<h4 class="Text Size-small">view</h4>
<h4 class="Text Size-small u-tSpace--m">view</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
<h4 class="Text Size-small">odyssey</h4>
<h4 class="Text Size-small u-tSpace--m">odyssey</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
<h4 class="Text Size-small">settings</h4>
<h4 class="Text Size-small u-tSpace--m">settings</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
<h4 class="Text Size-small">downloadCircle</h4>
<h4 class="Text Size-small u-tSpace--m">downloadCircle</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
<h4 class="Text Size-small">pencilMenu</h4>
<h4 class="Text Size-small u-tSpace--m">pencilMenu</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
<h4 class="Text Size-small">mobile</h4>
<h4 class="Text Size-small u-tSpace--m">mobile</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
<h4 class="Text Size-small">wizard</h4>
<h4 class="Text Size-small u-tSpace--m">wizard</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
<h4 class="Text Size-small">undo</h4>
<h4 class="Text Size-small u-tSpace--m">undo</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
<h4 class="Text Size-small">redo</h4>
<h4 class="Text Size-small u-tSpace--m">redo</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
<h4 class="Text Size-small">lArrowLight</h4>
<h4 class="Text Size-small u-tSpace--m">lArrowLight</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
<h4 class="Text Size-small">hide</h4>
<h4 class="Text Size-small u-tSpace--m">hide</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
<h4 class="Text Size-small">info</h4>
<h4 class="Text Size-small u-tSpace--m">info</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-fork Size-large"></i>
<h4 class="Text Size-small">fork</h4>
<h4 class="Text Size-small u-tSpace--m">fork</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-facebook Size-large"></i>
<h4 class="Text Size-small">facebook</h4>
<h4 class="Text Size-small u-tSpace--m">facebook</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-folder Size-large"></i>
<h4 class="Text Size-small">folder</h4>
<h4 class="Text Size-small u-tSpace--m">folder</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dropbox Size-large"></i>
<h4 class="Text Size-small">dropbox</h4>
<h4 class="Text Size-small u-tSpace--m">dropbox</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cloud Size-large"></i>
<h4 class="Text Size-small">cloud</h4>
<h4 class="Text Size-small u-tSpace--m">cloud</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-step Size-large"></i>
<h4 class="Text Size-small">step</h4>
<h4 class="Text Size-small u-tSpace--m">step</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-addDocument Size-large"></i>
<h4 class="Text Size-small">addDocument</h4>
<h4 class="Text Size-small u-tSpace--m">addDocument</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-arrowNext Size-large"></i>
<h4 class="Text Size-small">arrowNext</h4>
<h4 class="Text Size-small u-tSpace--m">arrowNext</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
<h4 class="Text Size-small">arrowPrev</h4>
<h4 class="Text Size-small u-tSpace--m">arrowPrev</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-close Size-large"></i>
<h4 class="Text Size-small">close</h4>
<h4 class="Text Size-small u-tSpace--m">close</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cartoFante Size-large"></i>
<h4 class="Text Size-small">cartoFante</h4>
<h4 class="Text Size-small u-tSpace--m">cartoFante</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lock Size-large"></i>
<h4 class="Text Size-small">lock</h4>
<h4 class="Text Size-small u-tSpace--m">lock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cartoDB Size-large"></i>
<h4 class="Text Size-small">cartoDB</h4>
<h4 class="Text Size-small u-tSpace--m">cartoDB</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-lens Size-large"></i>
<h4 class="Text Size-small">lens</h4>
<h4 class="Text Size-small u-tSpace--m">lens</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-closeLimits Size-large"></i>
<h4 class="Text Size-small">closeLimits</h4>
<h4 class="Text Size-small u-tSpace--m">closeLimits</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-defaultUser Size-large"></i>
<h4 class="Text Size-small">defaultUser</h4>
<h4 class="Text Size-small u-tSpace--m">defaultUser</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cockroach Size-large"></i>
<h4 class="Text Size-small">cockroach</h4>
<h4 class="Text Size-small u-tSpace--m">cockroach</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-floppy Size-large"></i>
<h4 class="Text Size-small">floppy</h4>
<h4 class="Text Size-small u-tSpace--m">floppy</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-trash Size-large"></i>
<h4 class="Text Size-small">trash</h4>
<h4 class="Text Size-small u-tSpace--m">trash</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-wifi Size-large"></i>
<h4 class="Text Size-small">wifi</h4>
<h4 class="Text Size-small u-tSpace--m">wifi</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-unlock Size-large"></i>
<h4 class="Text Size-small">unlock</h4>
<h4 class="Text Size-small u-tSpace--m">unlock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-unlockWithEllipsis Size-large"></i>
<h4 class="Text Size-small">unlockWithEllipsis</h4>
<h4 class="Text Size-small u-tSpace--m">unlockWithEllipsis</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-gift Size-large"></i>
<h4 class="Text Size-small">gift</h4>
<h4 class="Text Size-small u-tSpace--m">gift</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-people Size-large"></i>
<h4 class="Text Size-small">people</h4>
<h4 class="Text Size-small u-tSpace--m">people</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-play Size-large"></i>
<h4 class="Text Size-small">play</h4>
<h4 class="Text Size-small u-tSpace--m">play</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-add Size-large"></i>
<h4 class="Text Size-small">add</h4>
<h4 class="Text Size-small u-tSpace--m">add</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-map Size-large"></i>
<h4 class="Text Size-small">map</h4>
<h4 class="Text Size-small u-tSpace--m">map</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-anchor Size-large"></i>
<h4 class="Text Size-small">anchor</h4>
<h4 class="Text Size-small u-tSpace--m">anchor</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-key Size-large"></i>
<h4 class="Text Size-small">key</h4>
<h4 class="Text Size-small u-tSpace--m">key</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-calendar Size-large"></i>
<h4 class="Text Size-small">calendar</h4>
<h4 class="Text Size-small u-tSpace--m">calendar</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-document Size-large"></i>
<h4 class="Text Size-small">document</h4>
<h4 class="Text Size-small u-tSpace--m">document</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-eye Size-large"></i>
<h4 class="Text Size-small">eye</h4>
<h4 class="Text Size-small u-tSpace--m">eye</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-marker Size-large"></i>
<h4 class="Text Size-small">marker</h4>
<h4 class="Text Size-small u-tSpace--m">marker</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-progressBar Size-large"></i>
<h4 class="Text Size-small">progressBar</h4>
<h4 class="Text Size-small u-tSpace--m">progressBar</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-book Size-large"></i>
<h4 class="Text Size-small">book</h4>
<h4 class="Text Size-small u-tSpace--m">book</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-notes Size-large"></i>
<h4 class="Text Size-small">notes</h4>
<h4 class="Text Size-small u-tSpace--m">notes</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rectangles Size-large"></i>
<h4 class="Text Size-small">rectangles</h4>
<h4 class="Text Size-small u-tSpace--m">rectangles</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mountain Size-large"></i>
<h4 class="Text Size-small">mountain</h4>
<h4 class="Text Size-small u-tSpace--m">mountain</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-points Size-large"></i>
<h4 class="Text Size-small">points</h4>
<h4 class="Text Size-small u-tSpace--m">points</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-snake Size-large"></i>
<h4 class="Text Size-small">snake</h4>
<h4 class="Text Size-small u-tSpace--m">snake</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-boss Size-large"></i>
<h4 class="Text Size-small">boss</h4>
<h4 class="Text Size-small u-tSpace--m">boss</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rocket Size-large"></i>
<h4 class="Text Size-small">rocket</h4>
<h4 class="Text Size-small u-tSpace--m">rocket</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-barometer Size-large"></i>
<h4 class="Text Size-small">barometer</h4>
<h4 class="Text Size-small u-tSpace--m">barometer</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dollar Size-large"></i>
<h4 class="Text Size-small">dollar</h4>
<h4 class="Text Size-small u-tSpace--m">dollar</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-email Size-large"></i>
<h4 class="Text Size-small">email</h4>
<h4 class="Text Size-small u-tSpace--m">email</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-label Size-large"></i>
<h4 class="Text Size-small">label</h4>
<h4 class="Text Size-small u-tSpace--m">label</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-outside Size-large"></i>
<h4 class="Text Size-small">outside</h4>
<h4 class="Text Size-small u-tSpace--m">outside</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-jigsaw Size-large"></i>
<h4 class="Text Size-small">jigsaw</h4>
<h4 class="Text Size-small u-tSpace--m">jigsaw</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-tools Size-large"></i>
<h4 class="Text Size-small">tools</h4>
<h4 class="Text Size-small u-tSpace--m">tools</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-question Size-large"></i>
<h4 class="Text Size-small">question</h4>
<h4 class="Text Size-small u-tSpace--m">question</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-layerStack Size-large"></i>
<h4 class="Text Size-small">layerStack</h4>
<h4 class="Text Size-small u-tSpace--m">layerStack</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-alarm Size-large"></i>
<h4 class="Text Size-small">alarm</h4>
<h4 class="Text Size-small u-tSpace--m">alarm</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-cloudDownArrow Size-large"></i>
<h4 class="Text Size-small">cloudDownArrow</h4>
<h4 class="Text Size-small u-tSpace--m">cloudDownArrow</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-pencil Size-large"></i>
<h4 class="Text Size-small">pencil</h4>
<h4 class="Text Size-small u-tSpace--m">pencil</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-fountainPen Size-large"></i>
<h4 class="Text Size-small">fountainPen</h4>
<h4 class="Text Size-small u-tSpace--m">fountainPen</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-emptyDoc Size-large"></i>
<h4 class="Text Size-small">emptyDoc</h4>
<h4 class="Text Size-small u-tSpace--m">emptyDoc</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mergeArrow Size-large"></i>
<h4 class="Text Size-small">mergeArrow</h4>
<h4 class="Text Size-small u-tSpace--m">mergeArrow</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mergeColumns Size-large"></i>
<h4 class="Text Size-small">mergeColumns</h4>
<h4 class="Text Size-small u-tSpace--m">mergeColumns</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mergeSpatial Size-large"></i>
<h4 class="Text Size-small">mergeSpatial</h4>
<h4 class="Text Size-small u-tSpace--m">mergeSpatial</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-globe Size-large"></i>
<h4 class="Text Size-small">globe</h4>
<h4 class="Text Size-small u-tSpace--m">globe</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-chevronDown Size-large"></i>
<h4 class="Text Size-small">chevronDown</h4>
<h4 class="Text Size-small u-tSpace--m">chevronDown</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-streets Size-large"></i>
<h4 class="Text Size-small">streets</h4>
<h4 class="Text Size-small u-tSpace--m">streets</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-keys Size-large"></i>
<h4 class="Text Size-small">keys</h4>
<h4 class="Text Size-small u-tSpace--m">keys</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-facebookSquare Size-large"></i>
<h4 class="Text Size-small">facebookSquare</h4>
<h4 class="Text Size-small u-tSpace--m">facebookSquare</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-fullscreen Size-large"></i>
<h4 class="Text Size-small">fullscreen</h4>
<h4 class="Text Size-small u-tSpace--m">fullscreen</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rArrowLight Size-large"></i>
<h4 class="Text Size-small">rArrowLight</h4>
<h4 class="Text Size-small u-tSpace--m">rArrowLight</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-share Size-large"></i>
<h4 class="Text Size-small">share</h4>
<h4 class="Text Size-small u-tSpace--m">share</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-linkedin Size-large"></i>
<h4 class="Text Size-small">linkedin</h4>
<h4 class="Text Size-small u-tSpace--m">linkedin</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-calendarBlank Size-large"></i>
<h4 class="Text Size-small">calendarBlank</h4>
<h4 class="Text Size-small u-tSpace--m">calendarBlank</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-creativeCommons Size-large"></i>
<h4 class="Text Size-small">creativeCommons</h4>
<h4 class="Text Size-small u-tSpace--m">creativeCommons</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-bubble Size-large"></i>
<h4 class="Text Size-small">bubble</h4>
<h4 class="Text Size-small u-tSpace--m">bubble</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-bars Size-large"></i>
<h4 class="Text Size-small">bars</h4>
<h4 class="Text Size-small u-tSpace--m">bars</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-arrowMenuLight Size-large"></i>
<h4 class="Text Size-small">arrowMenuLight</h4>
<h4 class="Text Size-small u-tSpace--m">arrowMenuLight</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-tieFighter Size-large"></i>
<h4 class="Text Size-small">tieFighter</h4>
<h4 class="Text Size-small u-tSpace--m">tieFighter</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-ray Size-large"></i>
<h4 class="Text Size-small">ray</h4>
<h4 class="Text Size-small u-tSpace--m">ray</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-markup Size-large"></i>
<h4 class="Text Size-small">markup</h4>
<h4 class="Text Size-small u-tSpace--m">markup</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-table Size-large"></i>
<h4 class="Text Size-small">table</h4>
<h4 class="Text Size-small u-tSpace--m">table</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-airlock Size-large"></i>
<h4 class="Text Size-small">airlock</h4>
<h4 class="Text Size-small u-tSpace--m">airlock</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-pin Size-large"></i>
<h4 class="Text Size-small">pin</h4>
<h4 class="Text Size-small u-tSpace--m">pin</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-attache Size-large"></i>
<h4 class="Text Size-small">attache</h4>
<h4 class="Text Size-small u-tSpace--m">attache</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-download Size-large"></i>
<h4 class="Text Size-small">download</h4>
<h4 class="Text Size-small u-tSpace--m">download</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-group Size-large"></i>
<h4 class="Text Size-small">group</h4>
<h4 class="Text Size-small u-tSpace--m">group</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-dashboard Size-large"></i>
<h4 class="Text Size-small">dashboard</h4>
<h4 class="Text Size-small u-tSpace--m">dashboard</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-spinner Size-large"></i>
<h4 class="Text Size-small">spinner</h4>
<h4 class="Text Size-small u-tSpace--m">spinner</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-mapsearch Size-large"></i>
<h4 class="Text Size-small">mapsearch</h4>
<h4 class="Text Size-small u-tSpace--m">mapsearch</h4>
</div>
<div class="box">
<i class="CDB-IconFont CDB-IconFont-rArrow Size-large"></i>
<h4 class="Text Size-small">rArrow</h4>
<h4 class="Text Size-small u-tSpace--m">rArrow</h4>
</div>
```

3
src/scss/cdb-components/avatars.scss → src/scss/cdb-components/_avatars.scss
View File

@ -22,9 +22,6 @@
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-AvatarList {
padding-left: 12px;
}

4
src/scss/cdb-components/boxes.scss → src/scss/cdb-components/_boxes.scss
View File

@ -10,10 +10,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Box-modal {
min-width: 160px;
border: 1px solid $cMainLine;

5
src/scss/cdb-components/buttons.scss → src/scss/cdb-components/_buttons.scss
View File

@ -159,11 +159,6 @@ Layout Component:
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Button {
@include transition(background, 300ms);
position: relative;

7
src/scss/cdb-components/colors.scss → src/scss/cdb-components/_colors.scss
View File

@ -12,12 +12,9 @@
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
```
```
*/
@import '../cdb-variables/colors';
.Color-Blue {
background: $cBlue;
}
@ -125,5 +122,3 @@
.Color-Error {
background: $cError;
}

6
src/scss/cdb-components/headers.scss → src/scss/cdb-components/_headers.scss
View File

@ -145,7 +145,7 @@
<div class="CDB-HeaderInfo-inner CDB-Text">
<div class="CDB-HeaderInfo-title u-bSpace--m">
<h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
<div class="CDB-HeaderInfo-actions">
<a href="#">
<div class="CDB-Shape">
@ -166,10 +166,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-HeaderInfo {
@include display-flex();
@include align-items(flex-start);

4
src/scss/cdb-components/lists.scss → src/scss/cdb-components/_lists.scss
View File

@ -10,9 +10,6 @@
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-ListDecoration-item {
border-bottom: 1px solid $cSecondaryLine;
@ -36,4 +33,3 @@
padding: 12px 16px;
text-align: left;
}

4
src/scss/cdb-components/loader.scss → src/scss/cdb-components/_loader.scss
View File

@ -12,10 +12,6 @@ This is the generic loader for widgets, maps, components, ...
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Loader {
position: absolute;
top: 0;

6
src/scss/cdb-components/menu.scss → src/scss/cdb-components/_menu.scss
View File

@ -128,9 +128,6 @@
```
*/
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-NavMenu {
position: relative;
z-index: 2;
@ -227,6 +224,3 @@
color: $cSecondaryText;
}
}

6
src/scss/cdb-components/tags.scss → src/scss/cdb-components/_tags.scss
View File

@ -23,11 +23,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Tag {
padding: 0 3px;
border: 1px solid $cBlue;
@ -133,4 +128,3 @@
background: rgba(0, 0, 0, 0.04);
text-transform: uppercase;
}

5
src/scss/cdb-components/tooltips.scss → src/scss/cdb-components/_tooltips.scss
View File

@ -60,11 +60,6 @@
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-InfoTooltip {
display: inline-block;
position: absolute;

4
src/scss/cdb-components/typography.scss → src/scss/cdb-components/_typography.scss
View File

@ -19,9 +19,6 @@
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Text {
font-family: 'Open Sans';
$sFontWeight-normal: 400;
@ -74,4 +71,3 @@
.CDB-IconFont.is-disabled {
opacity: 0.24;
}

6
src/scss/cdb-components/forms/checkbox.scss → src/scss/cdb-components/forms/_checkbox.scss
View File

@ -20,11 +20,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Checkbox {
position: absolute;
width: $baseSize * 2;
@ -112,4 +107,3 @@
opacity: 0;
}
}

4
src/scss/cdb-components/forms/dropdowns.scss → src/scss/cdb-components/forms/_dropdowns.scss
View File

@ -109,10 +109,6 @@
```
*/
@import '../../cdb-utilities/mixins';
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-DropdownContainer {
position: relative;
height: 250px;

4
src/scss/cdb-components/forms/inputs.scss → src/scss/cdb-components/forms/_inputs.scss
View File

@ -11,10 +11,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/helpers';
.CDB-InputText {
width: 100%;
min-height: 32px;

4
src/scss/cdb-components/forms/legends.scss → src/scss/cdb-components/forms/_legends.scss
View File

@ -83,9 +83,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-utilities/mixins';
.CDB-Legend {
width: $baseSize * 12;
}
@ -101,4 +98,3 @@
.CDB-Fieldset-block {
width: 100%;
}

4
src/scss/cdb-components/forms/option-input.scss → src/scss/cdb-components/forms/_option-input.scss
View File

@ -98,10 +98,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-OptionInput {
width: 100%;
height: $baseSize * 4;

9
src/scss/cdb-components/forms/radio.scss → src/scss/cdb-components/forms/_radio.scss
View File

@ -21,11 +21,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Radio {
position: absolute;
width: $baseSize * 2;
@ -106,7 +101,3 @@
background: $cBlue;
}
}

4
src/scss/cdb-components/forms/selects.scss → src/scss/cdb-components/forms/_selects.scss
View File

@ -55,10 +55,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/helpers';
.CDB-Select {
position: relative;
}

11
src/scss/cdb-components/forms/tabsForms.scss → src/scss/cdb-components/forms/_tabsForms.scss
View File

@ -72,11 +72,6 @@
```
*/
@import '../../cdb-utilities/mixins';
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-TabsForms {
border: 1px solid $cMainLine;
border-radius: 4px;
@ -93,9 +88,3 @@
.CDB-TabsForms-button {
padding: 7px 8px;
}

4
src/scss/cdb-components/forms/textarea.scss → src/scss/cdb-components/forms/_textarea.scss
View File

@ -11,10 +11,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/helpers';
.CDB-Textarea {
width: 100%;
padding: 7px 8px 6px;

4
src/scss/cdb-components/forms/toggle.scss → src/scss/cdb-components/forms/_toggle.scss
View File

@ -28,10 +28,6 @@
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Toggle {
position: absolute;
width: $baseSize * 4;

5
src/scss/cdb-components/shapes/add.scss → src/scss/cdb-components/shapes/_add.scss
View File

@ -43,8 +43,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;
@ -126,6 +124,3 @@ Description
background: $cWhite;
}
}

2
src/scss/cdb-components/shapes/arrow.scss → src/scss/cdb-components/shapes/_arrow.scss
View File

@ -16,8 +16,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-Arrow {
position: relative;
width: 1px;

5
src/scss/cdb-components/shapes/check-circle.scss → src/scss/cdb-components/shapes/_check-circle.scss
View File

@ -55,8 +55,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-CircleItem {
width: 14px;
height: 14px;
@ -151,6 +149,3 @@ Description
background: $cHighlight;
}
}

3
src/scss/cdb-components/shapes/close.scss → src/scss/cdb-components/shapes/_close.scss
View File

@ -43,8 +43,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-close {
display: block;
position: relative;
@ -146,4 +144,3 @@ Description
background: $cError;
}
}

5
src/scss/cdb-components/shapes/dash.scss → src/scss/cdb-components/shapes/_dash.scss
View File

@ -43,8 +43,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-dash {
position: relative;
height: 100%;
@ -80,6 +78,3 @@ Description
background: $cWhite;
}
}

3
src/scss/cdb-components/shapes/dataset.scss → src/scss/cdb-components/shapes/_dataset.scss
View File

@ -78,9 +78,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-Dataset {
padding-top: 1px;
&.is-small {

3
src/scss/cdb-components/shapes/dots.scss → src/scss/cdb-components/shapes/_dots.scss
View File

@ -12,9 +12,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-dot {
display: inline-block;
width: $baseSize;

2
src/scss/cdb-components/shapes/error-circle.scss → src/scss/cdb-components/shapes/_error-circle.scss
View File

@ -55,8 +55,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;

3
src/scss/cdb-components/shapes/hamburguer.scss → src/scss/cdb-components/shapes/_hamburguer.scss
View File

@ -30,9 +30,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-hamburguer {
width: $baseSize * 2;
&:hover {

2
src/scss/cdb-components/shapes/magnify.scss → src/scss/cdb-components/shapes/_magnify.scss
View File

@ -44,8 +44,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-magnify {
display: block;
position: relative;

2
src/scss/cdb-components/shapes/move.scss → src/scss/cdb-components/shapes/_move.scss
View File

@ -85,8 +85,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-rectsHandle {
position: relative;
padding: 1px 0 0;

2
src/scss/cdb-components/shapes/paragraph.scss → src/scss/cdb-components/shapes/_paragraph.scss
View File

@ -66,8 +66,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-paragraph {
padding-top: 3px;
text-align: left;

2
src/scss/cdb-components/shapes/threePoints.scss → src/scss/cdb-components/shapes/_threePoints.scss
View File

@ -102,8 +102,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-threePoints {
display: inline-block;
padding: 0 4px;

2
src/scss/cdb-components/shapes/toogle-arrow.scss → src/scss/cdb-components/shapes/_toogle-arrow.scss
View File

@ -83,8 +83,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-ArrowToogle {
position: relative;
height: 100%;

2
src/scss/cdb-components/shapes/type.scss → src/scss/cdb-components/shapes/_type.scss
View File

@ -37,8 +37,6 @@ Description
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;

3
src/scss/cdb-utilities/defaults.css.scss → src/scss/cdb-utilities/_defaults.scss
View File

@ -1,8 +1,6 @@
// Default classes
// ----------------------------------------------
@import '../cdb-variables/colors';
body {
color: $cMainText;
}
@ -15,4 +13,3 @@ a {
a:hover {
text-decoration: underline;
}

0
src/scss/cdb-utilities/fonts.scss → src/scss/cdb-utilities/_fonts.scss
View File

3
src/scss/cdb-utilities/helpers.scss → src/scss/cdb-utilities/_helpers.scss
View File

@ -1,9 +1,6 @@
// Helper classes
// ----------------------------------------------
@import './mixins';
@import '../cdb-variables/colors';
/* Margins */
.u-tSpace {
margin-top: 4px;

0
src/scss/cdb-utilities/vendor/normalize.scss → src/scss/cdb-utilities/vendor/_normalize.scss vendored
View File

0
src/scss/cdb-utilities/vendor/reset.scss → src/scss/cdb-utilities/vendor/_reset.scss vendored
View File

56
src/scss/entry.scss Normal file
View File

@ -0,0 +1,56 @@
// Entry point for all CartoAssets
// ----------------------------------------------
// Variables and functions
@import 'cdb-variables/sizes';
@import 'cdb-variables/colors';
@import 'cdb-utilities/mixins';
@import 'cdb-utilities/vendor/reset';
@import 'cdb-utilities/vendor/normalize';
@import 'cdb-utilities/defaults';
@import 'cdb-utilities/fonts';
@import 'cdb-utilities/helpers';
@import 'vendor/perfect-scrollbar/main'; // Perfect scrollbar styles
@import 'cdb-components/forms/checkbox';
@import 'cdb-components/forms/dropdowns';
@import 'cdb-components/forms/inputs';
@import 'cdb-components/forms/legends';
@import 'cdb-components/forms/option-input';
@import 'cdb-components/forms/radio';
@import 'cdb-components/forms/selects';
@import 'cdb-components/forms/tabsForms';
@import 'cdb-components/forms/textarea';
@import 'cdb-components/forms/toggle';
@import 'cdb-components/shapes/add';
@import 'cdb-components/shapes/arrow';
@import 'cdb-components/shapes/check-circle';
@import 'cdb-components/shapes/close';
@import 'cdb-components/shapes/dash';
@import 'cdb-components/shapes/dataset';
@import 'cdb-components/shapes/dots';
@import 'cdb-components/shapes/error-circle';
@import 'cdb-components/shapes/hamburguer';
@import 'cdb-components/shapes/magnify';
@import 'cdb-components/shapes/move';
@import 'cdb-components/shapes/paragraph';
@import 'cdb-components/shapes/threePoints';
@import 'cdb-components/shapes/toogle-arrow';
@import 'cdb-components/shapes/type';
@import 'cdb-components/avatars';
@import 'cdb-components/boxes';
@import 'cdb-components/buttons';
@import 'cdb-components/colors';
@import 'cdb-components/headers';
@import 'cdb-components/lists';
@import 'cdb-components/loader';
@import 'cdb-components/menu';
@import 'cdb-components/tags';
@import 'cdb-components/tooltips';
@import 'cdb-components/typography';
@import 'cdb-icon-font';

3
src/scss/vendor/perfect-scrollbar/_main.scss vendored Normal file
View File

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

128
src/scss/vendor/perfect-scrollbar/_mixins.scss vendored Normal file
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 Normal file
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 Normal file
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;

13
styleguide/_template.html
View File

@ -1,8 +1,14 @@
<head>
<link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
}
</style>
</head>
{{> theme}}
@ -124,6 +130,3 @@
</div>
{{/each}}
</div>

2
tasks/sass.js
View File

@ -7,7 +7,7 @@ module.exports = {
files: [{
expand: true,
src: [
'src/scss/**/*.scss'
'src/scss/entry.scss'
],
dest: '.tmp',
ext: '.css'