diff --git a/Gulpfile.js b/Gulpfile.js index 5fc6b5d..e3dc0ee 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -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')); }); diff --git a/icon-font/template.jst.ejs b/icon-font/template.jst.ejs index 3552596..452bb08 100644 --- a/icon-font/template.jst.ejs +++ b/icon-font/template.jst.ejs @@ -43,7 +43,7 @@ All available icons in CartoDB. <% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
-

<%= name %>

+

<%= name %>

<% }); %> ``` diff --git a/package.json b/package.json index 3cd00cf..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" @@ -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", diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 9615584..35d6d5b 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 7a97c74..97e08a7 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 4e31ea4..e3068b5 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-icon-font.scss b/src/scss/_cdb-icon-font.scss similarity index 73% rename from src/scss/cdb-icon-font.scss rename to src/scss/_cdb-icon-font.scss index f417fee..d22047d 100644 --- a/src/scss/cdb-icon-font.scss +++ b/src/scss/_cdb-icon-font.scss @@ -43,673 +43,673 @@ All available icons in CartoDB.
-

clock

+

clock

-

stats

+

stats

-

heartEmpty

+

heartEmpty

-

heartFill

+

heartFill

-

alert

+

alert

-

rows

+

rows

-

check

+

check

-

dribbble

+

dribbble

-

twitter

+

twitter

-

caretDown

+

caretDown

-

lightbulb

+

lightbulb

-

explore

+

explore

-

drop

+

drop

-

edition

+

edition

-

view

+

view

-

odyssey

+

odyssey

-

settings

+

settings

-

downloadCircle

+

downloadCircle

-

pencilMenu

+

pencilMenu

-

mobile

+

mobile

-

wizard

+

wizard

-

undo

+

undo

-

redo

+

redo

-

lArrowLight

+

lArrowLight

-

hide

+

hide

-

info

+

info

-

fork

+

fork

-

facebook

+

facebook

-

folder

+

folder

-

dropbox

+

dropbox

-

cloud

+

cloud

-

step

+

step

-

addDocument

+

addDocument

-

arrowNext

+

arrowNext

-

arrowPrev

+

arrowPrev

-

close

+

close

-

cartoFante

+

cartoFante

-

lock

+

lock

-

cartoDB

+

cartoDB

-

lens

+

lens

-

closeLimits

+

closeLimits

-

defaultUser

+

defaultUser

-

cockroach

+

cockroach

-

floppy

+

floppy

-

trash

+

trash

-

wifi

+

wifi

-

unlock

+

unlock

-

unlockWithEllipsis

+

unlockWithEllipsis

-

gift

+

gift

-

people

+

people

-

play

+

play

-

add

+

add

-

map

+

map

-

anchor

+

anchor

-

key

+

key

-

calendar

+

calendar

-

document

+

document

-

eye

+

eye

-

marker

+

marker

-

progressBar

+

progressBar

-

book

+

book

-

notes

+

notes

-

rectangles

+

rectangles

-

mountain

+

mountain

-

points

+

points

-

snake

+

snake

-

boss

+

boss

-

rocket

+

rocket

-

barometer

+

barometer

-

dollar

+

dollar

-

email

+

email

-

label

+

label

-

outside

+

outside

-

jigsaw

+

jigsaw

-

tools

+

tools

-

question

+

question

-

layerStack

+

layerStack

-

alarm

+

alarm

-

cloudDownArrow

+

cloudDownArrow

-

pencil

+

pencil

-

fountainPen

+

fountainPen

-

emptyDoc

+

emptyDoc

-

mergeArrow

+

mergeArrow

-

mergeColumns

+

mergeColumns

-

mergeSpatial

+

mergeSpatial

-

globe

+

globe

-

chevronDown

+

chevronDown

-

streets

+

streets

-

keys

+

keys

-

facebookSquare

+

facebookSquare

-

fullscreen

+

fullscreen

-

rArrowLight

+

rArrowLight

-

share

+

share

-

linkedin

+

linkedin

-

calendarBlank

+

calendarBlank

-

creativeCommons

+

creativeCommons

-

bubble

+

bubble

-

bars

+

bars

-

arrowMenuLight

+

arrowMenuLight

-

tieFighter

+

tieFighter

-

ray

+

ray

-

markup

+

markup

-

table

+

table

-

airlock

+

airlock

-

pin

+

pin

-

attache

+

attache

-

download

+

download

-

group

+

group

-

dashboard

+

dashboard

-

spinner

+

spinner

-

mapsearch

+

mapsearch

-

rArrow

+

rArrow

``` diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/_avatars.scss similarity index 94% rename from src/scss/cdb-components/avatars.scss rename to src/scss/cdb-components/_avatars.scss index b661414..b6d6558 100644 --- a/src/scss/cdb-components/avatars.scss +++ b/src/scss/cdb-components/_avatars.scss @@ -22,9 +22,6 @@ ``` */ -@import '../cdb-variables/sizes'; -@import '../cdb-variables/colors'; - .CDB-AvatarList { padding-left: 12px; } diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/_boxes.scss similarity index 87% rename from src/scss/cdb-components/boxes.scss rename to src/scss/cdb-components/_boxes.scss index d32fd51..fbdcd66 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/_boxes.scss @@ -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; diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/_buttons.scss similarity index 99% rename from src/scss/cdb-components/buttons.scss rename to src/scss/cdb-components/_buttons.scss index 3184375..6f42f51 100644 --- a/src/scss/cdb-components/buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -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; diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/_colors.scss similarity index 98% rename from src/scss/cdb-components/colors.scss rename to src/scss/cdb-components/_colors.scss index 87fb7b7..98cb077 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/_colors.scss @@ -12,12 +12,9 @@
-``` +``` */ -@import '../cdb-variables/colors'; - - .Color-Blue { background: $cBlue; } @@ -125,5 +122,3 @@ .Color-Error { background: $cError; } - - diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/_headers.scss similarity index 98% rename from src/scss/cdb-components/headers.scss rename to src/scss/cdb-components/_headers.scss index 497bcd7..2f89782 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/_headers.scss @@ -145,7 +145,7 @@

Type

- +
@@ -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); diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/_lists.scss similarity index 88% rename from src/scss/cdb-components/lists.scss rename to src/scss/cdb-components/_lists.scss index 57b2a9c..3c016b6 100644 --- a/src/scss/cdb-components/lists.scss +++ b/src/scss/cdb-components/_lists.scss @@ -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; } - diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/_loader.scss similarity index 97% rename from src/scss/cdb-components/loader.scss rename to src/scss/cdb-components/_loader.scss index a1c2a5c..2890efd 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/_loader.scss @@ -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; diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/_menu.scss similarity index 98% rename from src/scss/cdb-components/menu.scss rename to src/scss/cdb-components/_menu.scss index 4e6787d..0759605 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/_menu.scss @@ -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; } } - - - diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/_tags.scss similarity index 96% rename from src/scss/cdb-components/tags.scss rename to src/scss/cdb-components/_tags.scss index c8a74ee..9ba0c5b 100644 --- a/src/scss/cdb-components/tags.scss +++ b/src/scss/cdb-components/_tags.scss @@ -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; } - diff --git a/src/scss/cdb-components/tooltips.scss b/src/scss/cdb-components/_tooltips.scss similarity index 97% rename from src/scss/cdb-components/tooltips.scss rename to src/scss/cdb-components/_tooltips.scss index 49cd210..f90333d 100644 --- a/src/scss/cdb-components/tooltips.scss +++ b/src/scss/cdb-components/_tooltips.scss @@ -60,11 +60,6 @@ ``` */ -@import '../cdb-utilities/mixins'; -@import '../cdb-variables/colors'; -@import '../cdb-variables/sizes'; - - .CDB-InfoTooltip { display: inline-block; position: absolute; diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/_typography.scss similarity index 96% rename from src/scss/cdb-components/typography.scss rename to src/scss/cdb-components/_typography.scss index 1487433..2726ca0 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/_typography.scss @@ -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; } - diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/_checkbox.scss similarity index 94% rename from src/scss/cdb-components/forms/checkbox.scss rename to src/scss/cdb-components/forms/_checkbox.scss index 2890cf8..be8ee9b 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/_checkbox.scss @@ -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; } } - diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/_dropdowns.scss similarity index 97% rename from src/scss/cdb-components/forms/dropdowns.scss rename to src/scss/cdb-components/forms/_dropdowns.scss index 5258392..bef1bf3 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/_dropdowns.scss @@ -109,10 +109,6 @@ ``` */ -@import '../../cdb-utilities/mixins'; -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; - .CDB-DropdownContainer { position: relative; height: 250px; diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/_inputs.scss similarity index 92% rename from src/scss/cdb-components/forms/inputs.scss rename to src/scss/cdb-components/forms/_inputs.scss index 02a1032..77d023f 100644 --- a/src/scss/cdb-components/forms/inputs.scss +++ b/src/scss/cdb-components/forms/_inputs.scss @@ -11,10 +11,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/helpers'; - .CDB-InputText { width: 100%; min-height: 32px; diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/_legends.scss similarity index 97% rename from src/scss/cdb-components/forms/legends.scss rename to src/scss/cdb-components/forms/_legends.scss index 34259cb..50d3c23 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/_legends.scss @@ -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%; } - diff --git a/src/scss/cdb-components/forms/option-input.scss b/src/scss/cdb-components/forms/_option-input.scss similarity index 97% rename from src/scss/cdb-components/forms/option-input.scss rename to src/scss/cdb-components/forms/_option-input.scss index 9383ff7..ff4987e 100644 --- a/src/scss/cdb-components/forms/option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -98,10 +98,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/mixins'; - .CDB-OptionInput { width: 100%; height: $baseSize * 4; diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/_radio.scss similarity index 94% rename from src/scss/cdb-components/forms/radio.scss rename to src/scss/cdb-components/forms/_radio.scss index 2ada046..aed6dca 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/_radio.scss @@ -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; } } - - - - diff --git a/src/scss/cdb-components/forms/selects.scss b/src/scss/cdb-components/forms/_selects.scss similarity index 96% rename from src/scss/cdb-components/forms/selects.scss rename to src/scss/cdb-components/forms/_selects.scss index f388874..3a69340 100644 --- a/src/scss/cdb-components/forms/selects.scss +++ b/src/scss/cdb-components/forms/_selects.scss @@ -55,10 +55,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/helpers'; - .CDB-Select { position: relative; } diff --git a/src/scss/cdb-components/forms/tabsForms.scss b/src/scss/cdb-components/forms/_tabsForms.scss similarity index 96% rename from src/scss/cdb-components/forms/tabsForms.scss rename to src/scss/cdb-components/forms/_tabsForms.scss index d0b5f34..b1655ba 100644 --- a/src/scss/cdb-components/forms/tabsForms.scss +++ b/src/scss/cdb-components/forms/_tabsForms.scss @@ -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; } - - - - - - diff --git a/src/scss/cdb-components/forms/textarea.scss b/src/scss/cdb-components/forms/_textarea.scss similarity index 90% rename from src/scss/cdb-components/forms/textarea.scss rename to src/scss/cdb-components/forms/_textarea.scss index 13c6c96..e6ace99 100644 --- a/src/scss/cdb-components/forms/textarea.scss +++ b/src/scss/cdb-components/forms/_textarea.scss @@ -11,10 +11,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/helpers'; - .CDB-Textarea { width: 100%; padding: 7px 8px 6px; diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/_toggle.scss similarity index 93% rename from src/scss/cdb-components/forms/toggle.scss rename to src/scss/cdb-components/forms/_toggle.scss index c41ac45..5947e5d 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/_toggle.scss @@ -28,10 +28,6 @@ ``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; -@import '../../cdb-utilities/mixins'; - .CDB-Toggle { position: absolute; width: $baseSize * 4; diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/_add.scss similarity index 98% rename from src/scss/cdb-components/shapes/add.scss rename to src/scss/cdb-components/shapes/_add.scss index 6fa4b2b..2860a56 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/_add.scss @@ -43,8 +43,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape { width: 16px; height: 16px; @@ -126,6 +124,3 @@ Description background: $cWhite; } } - - - diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/_arrow.scss similarity index 96% rename from src/scss/cdb-components/shapes/arrow.scss rename to src/scss/cdb-components/shapes/_arrow.scss index 295cd40..2f5cc7d 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/_arrow.scss @@ -16,8 +16,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-Arrow { position: relative; width: 1px; diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/_check-circle.scss similarity index 98% rename from src/scss/cdb-components/shapes/check-circle.scss rename to src/scss/cdb-components/shapes/_check-circle.scss index cf2b1f1..42323d8 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/_check-circle.scss @@ -55,8 +55,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-CircleItem { width: 14px; height: 14px; @@ -151,6 +149,3 @@ Description background: $cHighlight; } } - - - diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/_close.scss similarity index 98% rename from src/scss/cdb-components/shapes/close.scss rename to src/scss/cdb-components/shapes/_close.scss index 473f7dc..5ecde8e 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/_close.scss @@ -43,8 +43,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-close { display: block; position: relative; @@ -146,4 +144,3 @@ Description background: $cError; } } - diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/_dash.scss similarity index 97% rename from src/scss/cdb-components/shapes/dash.scss rename to src/scss/cdb-components/shapes/_dash.scss index 8c3bdeb..84c32f1 100644 --- a/src/scss/cdb-components/shapes/dash.scss +++ b/src/scss/cdb-components/shapes/_dash.scss @@ -43,8 +43,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-dash { position: relative; height: 100%; @@ -80,6 +78,3 @@ Description background: $cWhite; } } - - - diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/_dataset.scss similarity index 97% rename from src/scss/cdb-components/shapes/dataset.scss rename to src/scss/cdb-components/shapes/_dataset.scss index 71930a1..4635801 100644 --- a/src/scss/cdb-components/shapes/dataset.scss +++ b/src/scss/cdb-components/shapes/_dataset.scss @@ -78,9 +78,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; -@import '../../cdb-variables/sizes'; - .CDB-Shape-Dataset { padding-top: 1px; &.is-small { diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/_dots.scss similarity index 88% rename from src/scss/cdb-components/shapes/dots.scss rename to src/scss/cdb-components/shapes/_dots.scss index 54e61b7..f082276 100644 --- a/src/scss/cdb-components/shapes/dots.scss +++ b/src/scss/cdb-components/shapes/_dots.scss @@ -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; diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/_error-circle.scss similarity index 98% rename from src/scss/cdb-components/shapes/error-circle.scss rename to src/scss/cdb-components/shapes/_error-circle.scss index 010a296..12cc8eb 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/_error-circle.scss @@ -55,8 +55,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-CircleItem { width: 13px; height: 13px; diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/_hamburguer.scss similarity index 94% rename from src/scss/cdb-components/shapes/hamburguer.scss rename to src/scss/cdb-components/shapes/_hamburguer.scss index d5d2bc4..c1aeaf5 100644 --- a/src/scss/cdb-components/shapes/hamburguer.scss +++ b/src/scss/cdb-components/shapes/_hamburguer.scss @@ -30,9 +30,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; -@import '../../cdb-variables/sizes'; - .CDB-Shape-hamburguer { width: $baseSize * 2; &:hover { diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/_magnify.scss similarity index 98% rename from src/scss/cdb-components/shapes/magnify.scss rename to src/scss/cdb-components/shapes/_magnify.scss index abac5b5..1c3466d 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/_magnify.scss @@ -44,8 +44,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-magnify { display: block; position: relative; diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/_move.scss similarity index 99% rename from src/scss/cdb-components/shapes/move.scss rename to src/scss/cdb-components/shapes/_move.scss index 622ad77..792c34b 100644 --- a/src/scss/cdb-components/shapes/move.scss +++ b/src/scss/cdb-components/shapes/_move.scss @@ -85,8 +85,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-rectsHandle { position: relative; padding: 1px 0 0; diff --git a/src/scss/cdb-components/shapes/paragraph.scss b/src/scss/cdb-components/shapes/_paragraph.scss similarity index 98% rename from src/scss/cdb-components/shapes/paragraph.scss rename to src/scss/cdb-components/shapes/_paragraph.scss index 9c9517b..36b736c 100644 --- a/src/scss/cdb-components/shapes/paragraph.scss +++ b/src/scss/cdb-components/shapes/_paragraph.scss @@ -66,8 +66,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-paragraph { padding-top: 3px; text-align: left; diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/_threePoints.scss similarity index 99% rename from src/scss/cdb-components/shapes/threePoints.scss rename to src/scss/cdb-components/shapes/_threePoints.scss index effdd59..b15dad5 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/_threePoints.scss @@ -102,8 +102,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape-threePoints { display: inline-block; padding: 0 4px; diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/_toogle-arrow.scss similarity index 98% rename from src/scss/cdb-components/shapes/toogle-arrow.scss rename to src/scss/cdb-components/shapes/_toogle-arrow.scss index 90381da..240ea7a 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/_toogle-arrow.scss @@ -83,8 +83,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-ArrowToogle { position: relative; height: 100%; diff --git a/src/scss/cdb-components/shapes/type.scss b/src/scss/cdb-components/shapes/_type.scss similarity index 98% rename from src/scss/cdb-components/shapes/type.scss rename to src/scss/cdb-components/shapes/_type.scss index 1a6decc..a8aed38 100644 --- a/src/scss/cdb-components/shapes/type.scss +++ b/src/scss/cdb-components/shapes/_type.scss @@ -37,8 +37,6 @@ Description ``` */ -@import '../../cdb-variables/colors'; - .CDB-Shape { width: 16px; height: 16px; diff --git a/src/scss/cdb-utilities/defaults.css.scss b/src/scss/cdb-utilities/_defaults.scss similarity index 83% rename from src/scss/cdb-utilities/defaults.css.scss rename to src/scss/cdb-utilities/_defaults.scss index aaabb14..cf0f99d 100644 --- a/src/scss/cdb-utilities/defaults.css.scss +++ b/src/scss/cdb-utilities/_defaults.scss @@ -1,8 +1,6 @@ // Default classes // ---------------------------------------------- -@import '../cdb-variables/colors'; - body { color: $cMainText; } @@ -15,4 +13,3 @@ a { a:hover { text-decoration: underline; } - diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/_fonts.scss similarity index 100% rename from src/scss/cdb-utilities/fonts.scss rename to src/scss/cdb-utilities/_fonts.scss diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/_helpers.scss similarity index 97% rename from src/scss/cdb-utilities/helpers.scss rename to src/scss/cdb-utilities/_helpers.scss index c8d83d6..e4d90b3 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/_helpers.scss @@ -1,9 +1,6 @@ // Helper classes // ---------------------------------------------- -@import './mixins'; -@import '../cdb-variables/colors'; - /* Margins */ .u-tSpace { margin-top: 4px; diff --git a/src/scss/cdb-utilities/vendor/normalize.scss b/src/scss/cdb-utilities/vendor/_normalize.scss similarity index 100% rename from src/scss/cdb-utilities/vendor/normalize.scss rename to src/scss/cdb-utilities/vendor/_normalize.scss diff --git a/src/scss/cdb-utilities/vendor/reset.scss b/src/scss/cdb-utilities/vendor/_reset.scss similarity index 100% rename from src/scss/cdb-utilities/vendor/reset.scss rename to src/scss/cdb-utilities/vendor/_reset.scss diff --git a/src/scss/entry.scss b/src/scss/entry.scss new file mode 100644 index 0000000..db1e8d6 --- /dev/null +++ b/src/scss/entry.scss @@ -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'; 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; diff --git a/styleguide/_template.html b/styleguide/_template.html index ff15055..d28c814 100644 --- a/styleguide/_template.html +++ b/styleguide/_template.html @@ -1,8 +1,14 @@ - - + {{> theme}} @@ -124,6 +130,3 @@
{{/each}}
- - - diff --git a/tasks/sass.js b/tasks/sass.js index a6c6152..8f8f168 100644 --- a/tasks/sass.js +++ b/tasks/sass.js @@ -7,7 +7,7 @@ module.exports = { files: [{ expand: true, src: [ - 'src/scss/**/*.scss' + 'src/scss/entry.scss' ], dest: '.tmp', ext: '.css'