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

fix hound

Browse Source
This commit is contained in:
Emilio García 2016-01-25 15:45:56 +01:00
commit 0d76981cd1
19 changed files with 586 additions and 568 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Gulpfile.js
View File

@ -3,8 +3,7 @@ var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
String.prototype.toCamelCase = function() {
var str = this.replace('--', '');
return str.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});

BIN
icon-font/font.sketch
View File

Binary file not shown.

4
icon-font/svgs/icon-font_03_Heart--empty.svg → icon-font/svgs/icon-font_03_HeartEmpty.svg
View File

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="500px" height="445px" viewBox="0 0 500 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>icon-font_03_Heart--empty</title>
<title>icon-font_03_HeartEmpty</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-2000.000000, -28.000000)" stroke="#000000" stroke-width="55.5555556">
<path d="M2249.995,88.3321076 C2219.27316,49.4118608 2178.3807,28.0624556 2134.38806,28.0624556 C2069.23415,28.0624556 2000,78.9741772 2000,173.365404 C2000,270.452631 2082.72496,338.216955 2143.11859,387.692198 C2165.98996,406.460105 2182.77097,419.773557 2196.41178,430.599194 C2217.98308,447.691209 2228.80373,456.268445 2240.47443,468.353603 C2243.00458,470.987147 2246.39478,472.444444 2249.995,472.444444 C2253.59522,472.444444 2256.97542,470.997556 2259.51557,468.364012 C2274.9465,452.385788 2288.96734,441.331147 2326.50959,411.706375 L2356.6914,387.837928 C2406.77441,348.22026 2500,274.481017 2500,172.397343 C2500,78.5994436 2430.84585,28 2365.78195,28 C2321.7193,28 2280.74684,49.3910423 2249.995,88.3321076 Z M2335.44921,90.5535757 C2286.35269,112.377083 2250.05188,176.854234 2250.05188,176.854234 C2250.05188,176.854234 2161.16638,13.3746225 2072.42737,116.118152 C1983.68835,218.861681 2188.54065,352.913196 2188.54065,352.913196 L2248.96851,401.039415 L2327.26135,340.306376 C2327.26135,340.306376 2507.84301,219.038684 2425.22583,111.696153 C2394.32952,80.9330167 2362.7903,78.4004024 2335.44921,90.5535757 Z" id="icon-font_03_Heart--empty" sketch:type="MSShapeGroup"></path>
<path d="M2249.995,88.3321076 C2219.27316,49.4118608 2178.3807,28.0624556 2134.38806,28.0624556 C2069.23415,28.0624556 2000,78.9741772 2000,173.365404 C2000,270.452631 2082.72496,338.216955 2143.11859,387.692198 C2165.98996,406.460105 2182.77097,419.773557 2196.41178,430.599194 C2217.98308,447.691209 2228.80373,456.268445 2240.47443,468.353603 C2243.00458,470.987147 2246.39478,472.444444 2249.995,472.444444 C2253.59522,472.444444 2256.97542,470.997556 2259.51557,468.364012 C2274.9465,452.385788 2288.96734,441.331147 2326.50959,411.706375 L2356.6914,387.837928 C2406.77441,348.22026 2500,274.481017 2500,172.397343 C2500,78.5994436 2430.84585,28 2365.78195,28 C2321.7193,28 2280.74684,49.3910423 2249.995,88.3321076 Z M2335.44921,90.5535757 C2286.35269,112.377083 2250.05188,176.854234 2250.05188,176.854234 C2250.05188,176.854234 2161.16638,13.3746225 2072.42737,116.118152 C1983.68835,218.861681 2188.54065,352.913196 2188.54065,352.913196 L2248.96851,401.039415 L2327.26135,340.306376 C2327.26135,340.306376 2507.84301,219.038684 2425.22583,111.696153 C2394.32952,80.9330167 2362.7903,78.4004024 2335.44921,90.5535757 Z" id="icon-font_03_HeartEmpty" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

4
icon-font/svgs/icon-font_04_Heart--fill.svg → icon-font/svgs/icon-font_04_HeartFill.svg
View File

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="500px" height="445px" viewBox="0 0 500 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>icon-font_04_Heart--fill</title>
<title>icon-font_04_HeartFill</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-3000.000000, -25.000000)" stroke="#000000" stroke-width="55.5555556" fill="#000000">
<path d="M3249.995,85.3321076 C3219.27316,46.4118608 3178.3807,25.0624556 3134.38806,25.0624556 C3069.23415,25.0624556 3000,75.9741772 3000,170.365404 C3000,267.452631 3082.72496,335.216955 3143.11859,384.692198 C3165.98996,403.460105 3182.77097,416.773557 3196.41178,427.599194 C3217.98308,444.691209 3228.80373,453.268445 3240.47443,465.353603 C3243.00458,467.987147 3246.39478,469.444444 3249.995,469.444444 C3253.59522,469.444444 3256.97542,467.997556 3259.51557,465.364012 C3274.9465,449.385788 3288.96734,438.331147 3326.50959,408.706375 L3356.6914,384.837928 C3406.77441,345.22026 3500,271.481017 3500,169.397343 C3500,75.5994436 3430.84585,25 3365.78195,25 C3321.7193,25 3280.74684,46.3910423 3249.995,85.3321076 Z" id="icon-font_04_Heart--fill" sketch:type="MSShapeGroup"></path>
<path d="M3249.995,85.3321076 C3219.27316,46.4118608 3178.3807,25.0624556 3134.38806,25.0624556 C3069.23415,25.0624556 3000,75.9741772 3000,170.365404 C3000,267.452631 3082.72496,335.216955 3143.11859,384.692198 C3165.98996,403.460105 3182.77097,416.773557 3196.41178,427.599194 C3217.98308,444.691209 3228.80373,453.268445 3240.47443,465.353603 C3243.00458,467.987147 3246.39478,469.444444 3249.995,469.444444 C3253.59522,469.444444 3256.97542,467.997556 3259.51557,465.364012 C3274.9465,449.385788 3288.96734,438.331147 3326.50959,408.706375 L3356.6914,384.837928 C3406.77441,345.22026 3500,271.481017 3500,169.397343 C3500,75.5994436 3430.84585,25 3365.78195,25 C3321.7193,25 3280.74684,46.3910423 3249.995,85.3321076 Z" id="icon-font_04_HeartFill" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

4
icon-font/svgs/icon-font_35_Unlock--withEllipsis.svg → icon-font/svgs/icon-font_35_UnlockWithEllipsis.svg
View File

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>icon-font_35_Unlock--withEllipsis</title>
<title>icon-font_35_UnlockWithEllipsis</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-6000.000000, -3000.000000)" fill="#000000">
<path d="M6370.33872,3000.01022 C6369.62321,2999.99535 6368.72708,3000.03995 6367.99767,3000.03995 C6297.69645,3000.03995 6240.71913,3061.02701 6240.71913,3136.25552 L6240.71913,3218.29259 L6000,3218.29259 L6000,3500 L6350.58214,3500 L6350.58214,3218.29259 L6304.40702,3218.29259 L6304.40702,3136.25552 C6304.40702,3098.72674 6332.93737,3068.21463 6367.99767,3068.21463 C6369.00495,3068.21463 6371.10981,3068.15517 6371.10981,3068.15517 C6371.10981,3068.15517 6372.17962,3068.19977 6372.70757,3068.19977 C6407.78176,3068.19977 6436.3121,3098.71188 6436.3121,3136.24066 C6436.3121,3136.24066 6436.30516,3150.63078 6436.30516,3169.16846 L6457.59698,3169.16846 L6457.59698,3177.8724 L6436.30516,3199.27919 L6436.30516,3218.29259 L6500,3218.29259 L6500,3136.24066 C6500,3061.01214 6443.00878,3000.02509 6372.70757,3000.02509 C6371.83922,3000.02509 6371.20012,2999.98049 6370.33872,3000.01022 Z M6100,3388.88889 C6113.80712,3388.88889 6125,3376.45235 6125,3361.11111 C6125,3345.76987 6113.80712,3333.33333 6100,3333.33333 C6086.19288,3333.33333 6075,3345.76987 6075,3361.11111 C6075,3376.45235 6086.19288,3388.88889 6100,3388.88889 Z M6175,3388.88889 C6188.80712,3388.88889 6200,3376.45235 6200,3361.11111 C6200,3345.76987 6188.80712,3333.33333 6175,3333.33333 C6161.19288,3333.33333 6150,3345.76987 6150,3361.11111 C6150,3376.45235 6161.19288,3388.88889 6175,3388.88889 Z M6250,3388.88889 C6263.80712,3388.88889 6275,3376.45235 6275,3361.11111 C6275,3345.76987 6263.80712,3333.33333 6250,3333.33333 C6236.19288,3333.33333 6225,3345.76987 6225,3361.11111 C6225,3376.45235 6236.19288,3388.88889 6250,3388.88889 Z" id="icon-font_35_Unlock--withEllipsis" sketch:type="MSShapeGroup"></path>
<path d="M6370.33872,3000.01022 C6369.62321,2999.99535 6368.72708,3000.03995 6367.99767,3000.03995 C6297.69645,3000.03995 6240.71913,3061.02701 6240.71913,3136.25552 L6240.71913,3218.29259 L6000,3218.29259 L6000,3500 L6350.58214,3500 L6350.58214,3218.29259 L6304.40702,3218.29259 L6304.40702,3136.25552 C6304.40702,3098.72674 6332.93737,3068.21463 6367.99767,3068.21463 C6369.00495,3068.21463 6371.10981,3068.15517 6371.10981,3068.15517 C6371.10981,3068.15517 6372.17962,3068.19977 6372.70757,3068.19977 C6407.78176,3068.19977 6436.3121,3098.71188 6436.3121,3136.24066 C6436.3121,3136.24066 6436.30516,3150.63078 6436.30516,3169.16846 L6457.59698,3169.16846 L6457.59698,3177.8724 L6436.30516,3199.27919 L6436.30516,3218.29259 L6500,3218.29259 L6500,3136.24066 C6500,3061.01214 6443.00878,3000.02509 6372.70757,3000.02509 C6371.83922,3000.02509 6371.20012,2999.98049 6370.33872,3000.01022 Z M6100,3388.88889 C6113.80712,3388.88889 6125,3376.45235 6125,3361.11111 C6125,3345.76987 6113.80712,3333.33333 6100,3333.33333 C6086.19288,3333.33333 6075,3345.76987 6075,3361.11111 C6075,3376.45235 6086.19288,3388.88889 6100,3388.88889 Z M6175,3388.88889 C6188.80712,3388.88889 6200,3376.45235 6200,3361.11111 C6200,3345.76987 6188.80712,3333.33333 6175,3333.33333 C6161.19288,3333.33333 6150,3345.76987 6150,3361.11111 C6150,3376.45235 6161.19288,3388.88889 6175,3388.88889 Z M6250,3388.88889 C6263.80712,3388.88889 6275,3376.45235 6275,3361.11111 C6275,3345.76987 6263.80712,3333.33333 6250,3333.33333 C6236.19288,3333.33333 6225,3345.76987 6225,3361.11111 C6225,3376.45235 6236.19288,3388.88889 6250,3388.88889 Z" id="icon-font_35_UnlockWithEllipsis" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

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

@ -42,7 +42,7 @@ All available icons in CartoDB.
<% _.each(glyphs, function(glyph) { %>
<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
<div class="box">
<i class="CDB-IconFont CDB-IconFont--<%= name %> Size-large"></i>
<i class="CDB-IconFont CDB-IconFont-<%= name %> Size-large"></i>
<h4 class="Text Size-small"><%= name %></h4>
</div>
<% }); %>
@ -51,7 +51,7 @@ All available icons in CartoDB.
<% _.each(glyphs, function(glyph) { %>
<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
.CDB-IconFont--<%= name %>::before {
.CDB-IconFont-<%= name %>::before {
content: '\<%= glyph.codePoint %>';
}
<% }); %>

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "cartoassets",
"description": "Share frontend assets between different CartoDB repositories",
"version": "0.1.19",
"version": "0.1.20",
"homepage": "https://github.com/cartodb/CartoAssets",
"author": {
"name": "CartoDB",

6
src/fonts/cartoIcon.svg
View File

@ -13,10 +13,10 @@
<glyph glyph-name="icon-font_02_Stats"
unicode="&#xE002;"
horiz-adv-x="494" d=" M52.2759488 68.314514L82.2817428 100.332194L130.0614820000001 44.339471C136.398109 36.891326 146.952616 33.010138 157.585594 34.233094C168.1891450000001 35.413587 177.203635 41.553848 181.107625 50.190978L226.523391 150.47341L292.351728 16.228457C296.961967 6.742051 307.634182 0.703704 319.434434 0.703704C319.983739 0.703704 320.533044 0.703704 321.082349 0.729182C333.5005690000001 1.357646 344.084502 8.610457 347.6255590000001 18.912167L410.295391 201.4808875L437.9274020000001 152.333323C445.019324 139.679121 462.6363249999999 134.422106 477.251766 140.579353C491.867207 146.719613 497.978226 161.998077 490.847068 174.626801L430.13904 282.6716103C424.8127420000001 292.15801586 413.3754240000001 297.771725881 401.2612830000001 296.9139577846001C389.117716 296.056189688 378.926143 288.89679855 375.45375 278.7904220000001L314.510305 101.359817L252.517295 227.8593797C247.848201 237.42222 237.019043 243.5370025 225.002992 243.3926257C213.035987 243.2482489 202.403009 236.8786838 198.037995 227.1969449L145.7461060000001 111.678513L107.029902 157.07228C101.5858949999999 163.424859 93.1599466 167.204135 84.0375575000001 167.390975C74.8857413000001 167.586309 66.2636122 164.138251 60.5155261 157.972512L6.58553089 100.459585C-3.66489562 89.529412 -1.73251857 73.478108 10.8720729 64.603181C23.4864734 55.736746 42.0255223 57.392833 52.2759488 68.314514z" />
<glyph glyph-name="icon-font_03_Heart--empty"
<glyph glyph-name="icon-font_03_HeartEmpty"
unicode="&#xE003;"
horiz-adv-x="500" d=" M249.9949999999999 384.6678924000001C219.2731600000002 423.5881392 178.3807000000002 444.9375444 134.3880600000002 444.9375444C69.2341500000002 444.9375444 0 394.0258228 0 299.634596C0 202.547369 82.72496 134.783045 143.1185900000001 85.307802C165.9899599999999 66.539895 182.77097 53.226443 196.4117799999999 42.400806C217.98308 25.308791 228.8037300000001 16.731555 240.4744300000002 4.646397C243.0045799999998 2.012853 246.3947800000001 0.555556 249.9949999999999 0.555556C253.5952200000002 0.555556 256.9754200000002 2.002444 259.5155700000001 4.635988C274.9465 20.614212 288.9673400000002 31.668853 326.5095900000001 61.293625L356.6914000000002 85.162072C406.77441 124.77974 500 198.518983 500 300.602657C500 394.4005564000001 430.8458500000002 445 365.7819500000001 445C321.7193000000002 445 280.7468399999998 423.6089577 249.9949999999999 384.6678924000001zM335.4492100000002 382.4464243C286.3526900000002 360.6229170000001 250.05188 296.145766 250.05188 296.145766C250.05188 296.145766 161.1663800000001 459.6253775 72.4273699999999 356.881848C-16.3116500000001 254.138319 188.5406499999999 120.086804 188.5406499999999 120.086804L248.9685100000002 71.960585L327.2613500000002 132.693624C327.2613500000002 132.693624 507.84301 253.961316 425.2258299999999 361.303847C394.3295199999998 392.0669833 362.7903000000001 394.5995976 335.4492100000002 382.4464243z" />
<glyph glyph-name="icon-font_04_Heart--fill"
<glyph glyph-name="icon-font_04_HeartFill"
unicode="&#xE004;"
horiz-adv-x="500" d=" M249.9949999999999 384.6678924000001C219.2731600000002 423.5881392 178.3807000000002 444.9375444 134.3880600000002 444.9375444C69.2341500000002 444.9375444 0 394.0258228 0 299.634596C0 202.547369 82.72496 134.783045 143.1185900000001 85.307802C165.9899599999999 66.539895 182.77097 53.226443 196.4117799999999 42.400806C217.98308 25.308791 228.8037300000001 16.731555 240.4744300000002 4.646397C243.0045799999998 2.012853 246.3947800000001 0.555556 249.9949999999999 0.555556C253.5952200000002 0.555556 256.9754200000002 2.002444 259.5155700000001 4.635988C274.9465 20.614212 288.9673400000002 31.668853 326.5095900000001 61.293625L356.6914000000002 85.162072C406.77441 124.77974 500 198.518983 500 300.602657C500 394.4005564000001 430.8458500000002 445 365.7819500000001 445C321.7193000000002 445 280.7468399999998 423.6089577 249.9949999999999 384.6678924000001z" />
<glyph glyph-name="icon-font_05_Alert"
@ -103,7 +103,7 @@
<glyph glyph-name="icon-font_34_Unlock"
unicode="&#xE020;"
horiz-adv-x="500" d=" M370.3387199999998 499.9908C369.6232099999998 500.0041799999999 368.7270799999997 499.9640399999998 367.9976699999998 499.9640399999998C297.6964500000004 499.9640399999998 240.7191300000004 445.0756900000001 240.7191300000004 377.3700300000001L240.7191300000004 281.53667L0 281.53667L0 0L350.5821500000002 0L350.5821400000005 281.53667L304.4070199999997 281.53667L304.4070199999997 377.3700300000001C304.4070199999997 411.1459300000002 332.9373699999997 438.6068300000002 367.9976699999998 438.6068300000002C369.0049499999996 438.6068300000002 371.1098099999999 438.6603500000001 371.1098099999999 438.6603500000001C371.1098099999999 438.6603500000001 372.1796199999999 438.6202100000001 372.7075699999996 438.6202100000001C407.7817599999999 438.6202100000001 436.3121000000001 411.15931 436.3121000000001 377.3834099999999C436.3121000000001 377.3834099999999 436.3051599999999 364.4323 436.3051599999999 347.74838L457.5969800000003 347.74838L457.5969800000003 339.9148399999999L436.3051599999999 320.6487299999999L436.3051599999999 281.53667L500 281.53667L500 377.3834099999999C500 445.08907 443.0087800000001 499.9774200000002 372.7075699999996 499.9774200000002C371.8392199999999 499.9774200000002 371.2001200000004 500.0175599999998 370.3387199999998 499.9908z" />
<glyph glyph-name="icon-font_35_Unlock--withEllipsis"
<glyph glyph-name="icon-font_35_UnlockWithEllipsis"
unicode="&#xE021;"
horiz-adv-x="500" d=" M370.3387199999998 499.9897799999999C369.6232099999998 500.0046499999999 368.7270799999997 499.9600500000001 367.9976699999998 499.9600500000001C297.6964500000004 499.9600500000001 240.7191300000004 438.9729900000002 240.7191300000004 363.7444799999999L240.7191300000004 281.70741L0 281.70741L0 0L350.5821400000005 0L350.5821400000005 281.70741L304.4070199999997 281.70741L304.4070199999997 363.7444799999999C304.4070199999997 401.27326 332.9373699999997 431.7853700000001 367.9976699999998 431.7853700000001C369.0049499999996 431.7853700000001 371.1098099999999 431.84483 371.1098099999999 431.84483C371.1098099999999 431.84483 372.1796199999999 431.8002299999999 372.7075699999996 431.8002299999999C407.7817599999999 431.8002299999999 436.3121000000001 401.2881200000002 436.3121000000001 363.7593400000001C436.3121000000001 363.7593400000001 436.3051599999999 349.3692200000001 436.3051599999999 330.8315400000002L457.5969800000003 330.8315400000002L457.5969800000003 322.1275999999998L436.3051599999999 300.7208099999998L436.3051599999999 281.70741L500 281.70741L500 363.7593400000001C500 438.9878600000002 443.0087800000001 499.9749099999999 372.7075699999996 499.9749099999999C371.8392199999999 499.9749099999999 371.2001200000004 500.0195100000001 370.3387199999998 499.9897799999999zM100 111.1111099999998C113.8071200000004 111.1111099999998 125 123.54765 125 138.8888900000002C125 154.2301299999999 113.8071200000004 166.6666700000001 100 166.6666700000001C86.1928799999996 166.6666700000001 75 154.2301299999999 75 138.8888900000002C75 123.54765 86.1928799999996 111.1111099999998 100 111.1111099999998zM175 111.1111099999998C188.8071200000004 111.1111099999998 200 123.54765 200 138.8888900000002C200 154.2301299999999 188.8071200000004 166.6666700000001 175 166.6666700000001C161.1928799999996 166.6666700000001 150 154.2301299999999 150 138.8888900000002C150 123.54765 161.1928799999996 111.1111099999998 175 111.1111099999998zM250 111.1111099999998C263.8071200000004 111.1111099999998 275 123.54765 275 138.8888900000002C275 154.2301299999999 263.8071200000004 166.6666700000001 250 166.6666700000001C236.1928799999996 166.6666700000001 225 154.2301299999999 225 138.8888900000002C225 123.54765 236.1928799999996 111.1111099999998 250 111.1111099999998z" />
<glyph glyph-name="icon-font_36_Gift"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 166 KiB

355
src/scss/cdb-components/forms.scss
View File

@ -1,355 +0,0 @@
// Menu styles
// ----------------------------------------------
/* SG
# Forms/Radio
```
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
<input class="CDB-Radio" type="radio" name="Gender" value="02">
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Radio {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 50%;
&:before {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $baseSize - 2;
height: $baseSize - 2;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;
background: $cSecondaryLine;
content: '';
}
&:checked {
border: 1px solid $cBlue;
background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&:before {
background: $cWhite;
}
}
&:focus {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&:before {
background: $cWhite;
}
}
}
/* SG
# Forms/Checkbox
```
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked>
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
```
*/
.CDB-Checkbox {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 3px;
&:before,
&:after {
display: block;
position: absolute;
bottom: 3px;
width: 2px;
border-radius: 1px;
background: $cSecondaryLine;
content: '';
}
&:before {
right: $baseSize / 2;
height: $baseSize;
transform: rotate(45deg);
}
&:after {
left: $baseSize / 2;
height: $baseSize - 2;
transform: rotate(-45deg);
}
&:checked {
border: 1px solid $cBlue;
background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&:before,
&:after {
background: $cWhite;
}
}
&:focus {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&:before,
&:after {
background: $cWhite;
}
}
}
/* SG
# Forms/Inputs
```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled Text">
```
*/
.CDB-InputText {
min-width: 152px;
padding: 7px 8px 6px;
border: 1px solid $cMainLine;
border-radius: 3px;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
&:hover {
border: 1px solid $cHoverLine;
}
&:focus {
border: 1px solid $cBlue;
}
&:disabled {
border-color: $cSecondaryLine;
background: $cThirdBackground;
}
&.has-error {
border: 1px solid rgba($cError, 0.48);
background: rgba($cError, 0.04);
color: $cError;
}
}
/* SG
# Forms/Sliders
```
<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range"/>
```
*/
.CDB-Range {
position: relative;
width: 100%;
margin: -4px 0 0;
padding: 0;
background: transparent;
cursor: pointer;
overflow: hidden;
vertical-align: middle;
}
.CDB-Range::-webkit-slider-thumb {
position: relative;
width: $baseSize / 2;
height: 100%;
border-radius: $baseSize / 2;
}
.CDB-Range::-webkit-slider-runnable-track {
height: $baseSize / 2;
margin: $baseSize 0;
border-radius: $baseSize / 2;
background: $cMainLine;
}
.CDB-Range::-webkit-slider-thumb:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -3000px;
height: $baseSize / 2;
border-radius: $baseSize / 2;
background: $cBlue;
content: '';
}
.CDB-Range::-webkit-slider-thumb:after {
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cMainLine;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
z-index: 10;
}
.CDB-Range:focus {
outline: none;
}
.CDB-Range:hover::-webkit-slider-thumb:after,
.CDB-Range:focus::-webkit-slider-thumb:after {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.64);
cursor: pointer;
}
.CDB-Range:disabled::-webkit-slider-thumb:before {
opacity: 0.2;
}
.CDB-Range:disabled::-webkit-slider-thumb:after {
opacity: 0.2;
}
/* SG
# Forms/Selects
```
<div class="CDB-Select" style="height: 250px;">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="Text Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
```
*/
.CDB-Select {
position: relative;
}
.CDB-SelectItem {
position: absolute;
top: 40px;
}
/* SG
# Forms/Labels
```
<label class="u-iblock Text Size-medium u-rSpace--xl">
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked>
<span class="u-iBlock">True</span>
</label>
<label class="u-iblock Text Size-medium">
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked>
<span class="u-iBlock">False</span>
</label>
<br/>
<br/>
<br/>
<label class="u-iblock Text Size-medium u-rSpace--xl">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport" >
<span class="u-iBlock">Sport</span>
</label>
<label class="u-iblock Text Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
<br/>
<br/>
<br/>
<fieldset>
<p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
<ul class="Text Size-medium u-iBlock">
<li class="u-iBlock u-rSpace--xl">
<label>
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
</li>
<li class="u-iblock">
<label>
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
</li>
</ul>
</fieldset>
<fieldset class="u-tSpace-xl">
<p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
<div class="u-iBlock">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
</div>
</fieldset>
```
*/
.CDB-Legend {
width: $baseSize * 12;
}

82
src/scss/cdb-components/forms/checkbox.scss Normal file
View File

@ -0,0 +1,82 @@
// CheckBoxes styles
// ----------------------------------------------
/* SG
# Forms/Checkbox
```
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked>
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Checkbox {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 3px;
&:before,
&:after {
display: block;
position: absolute;
bottom: 3px;
width: 2px;
border-radius: 1px;
background: $cSecondaryLine;
content: '';
}
&:before {
right: $baseSize / 2;
height: $baseSize;
transform: rotate(45deg);
}
&:after {
left: $baseSize / 2;
height: $baseSize - 2;
transform: rotate(-45deg);
}
&:checked {
border: 1px solid $cBlue;
background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&:before,
&:after {
background: $cWhite;
}
}
&:focus {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&:before,
&:after {
background: $cWhite;
}
}
}

41
src/scss/cdb-components/forms/inputs.scss Normal file
View File

@ -0,0 +1,41 @@
// Input styles
// ----------------------------------------------
/* SG
# Forms/Inputs
```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled Text">
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-InputText {
min-width: 152px;
padding: 7px 8px 6px;
border: 1px solid $cMainLine;
border-radius: 3px;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
&:hover {
border: 1px solid $cHoverLine;
}
&:focus {
border: 1px solid $cBlue;
}
&:disabled {
border-color: $cSecondaryLine;
background: $cThirdBackground;
}
&.has-error {
border: 1px solid rgba($cError, 0.48);
background: rgba($cError, 0.04);
color: $cError;
}
}

65
src/scss/cdb-components/forms/legends.scss Normal file
View File

@ -0,0 +1,65 @@
// Legends styles
// ----------------------------------------------
/* SG
# Forms/Labels
```
<label class="u-iblock Text Size-medium u-rSpace--xl">
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked>
<span class="u-iBlock">True</span>
</label>
<label class="u-iblock Text Size-medium">
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked>
<span class="u-iBlock">False</span>
</label>
<br/>
<br/>
<br/>
<label class="u-iblock Text Size-medium u-rSpace--xl">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport" >
<span class="u-iBlock">Sport</span>
</label>
<label class="u-iblock Text Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
<br/>
<br/>
<br/>
<fieldset>
<p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
<ul class="Text Size-medium u-iBlock">
<li class="u-iBlock u-rSpace--xl">
<label>
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
</li>
<li class="u-iblock">
<label>
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
</li>
</ul>
</fieldset>
<fieldset class="u-tSpace-xl">
<p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
<div class="u-iBlock">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
</div>
</fieldset>
```
*/
@import '../../cdb-variables/sizes';
.CDB-Legend {
width: $baseSize * 12;
}

72
src/scss/cdb-components/forms/radio.scss Normal file
View File

@ -0,0 +1,72 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Radio2
```
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
<input class="CDB-Radio" type="radio" name="Gender" value="02">
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Radio {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 50%;
&:before {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $baseSize - 2;
height: $baseSize - 2;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;
background: $cSecondaryLine;
content: '';
}
&:checked {
border: 1px solid $cBlue;
background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&:before {
background: $cWhite;
}
}
&:focus {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&:before {
background: $cWhite;
}
}
}

30
src/scss/cdb-components/forms/selects.scss Normal file
View File

@ -0,0 +1,30 @@
// Select styles
// ----------------------------------------------
/* SG
# Forms/Selects
```
<div class="CDB-Select" style="height: 250px;">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="Text Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
```
*/
.CDB-Select {
position: relative;
}
.CDB-SelectItem {
position: absolute;
top: 40px;
}

84
src/scss/cdb-components/forms/sliders.scss Normal file
View File

@ -0,0 +1,84 @@
// Sliders styles
// ----------------------------------------------
/* SG
# Forms/Sliders
```
<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range"/>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Range {
position: relative;
width: 100%;
margin: -4px 0 0;
padding: 0;
background: transparent;
cursor: pointer;
overflow: hidden;
vertical-align: middle;
}
.CDB-Range::-webkit-slider-thumb {
position: relative;
width: $baseSize / 2;
height: 100%;
border-radius: $baseSize / 2;
}
.CDB-Range::-webkit-slider-runnable-track {
height: $baseSize / 2;
margin: $baseSize 0;
border-radius: $baseSize / 2;
background: $cMainLine;
}
.CDB-Range::-webkit-slider-thumb:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -3000px;
height: $baseSize / 2;
border-radius: $baseSize / 2;
background: $cBlue;
content: '';
}
.CDB-Range::-webkit-slider-thumb:after {
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cMainLine;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
z-index: 10;
}
.CDB-Range:focus {
outline: none;
}
.CDB-Range:hover::-webkit-slider-thumb:after,
.CDB-Range:focus::-webkit-slider-thumb:after {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.64);
cursor: pointer;
}
.CDB-Range:disabled::-webkit-slider-thumb:before {
opacity: 0.2;
}
.CDB-Range:disabled::-webkit-slider-thumb:after {
opacity: 0.2;
}

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

@ -1,4 +1,4 @@
// Menu styles
// List styles
// ----------------------------------------------
/* SG
@ -7,7 +7,7 @@
```
<div class="CDB-Box-Modal">&nbsp;</div>
```
```
*/
@import '../cdb-variables/sizes';

2
src/scss/cdb-components/menu.scss
View File

@ -67,7 +67,7 @@
<br/><br/>
<br/><br/>
```
```
*/
@import '../cdb-variables/colors';

2
src/scss/cdb-components/shapes.scss
View File

@ -1,4 +1,4 @@
// Shapes styles
// Shape styles
// ----------------------------------------------
/* SG

390
src/scss/cdb-icon-font.scss
View File

File diff suppressed because it is too large Load Diff