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

Merge pull request #161 from CartoDB/update-cartoAssets

Browse Source 
Update carto assets
This commit is contained in:
piensaenpixel 2017-05-10 18:14:52 +02:00 committed by GitHub
commit 6da2097d5d
3 changed files with 148 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/scss/cdb-components/buttons.scss
View File

@ -9,8 +9,13 @@ Layout Component:
``` ```
<button class="CDB-Button CDB-Button--primary CDB-Button--big"> <button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled"> <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
@ -18,16 +23,26 @@ Layout Component:
</button> </button>
<button class="CDB-Button CDB-Button--primary"> <button class="CDB-Button CDB-Button--loading CDB-Button--primary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--primary is-disabled"> <button class="CDB-Button CDB-Button--primary is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button> </button>
<button class="CDB-Button CDB-Button--primary CDB-Button--small"> <button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled"> <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
@ -151,12 +166,14 @@ Layout Component:
.CDB-Button { .CDB-Button {
@include transition(background, 300ms); @include transition(background, 300ms);
padding: $baseSize + 1 $baseSize + 12; position: relative;
padding: $baseSize $baseSize + 12;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
.CDB-Button-Text { .CDB-Button-Text {
display: block; display: block;
} }
@ -166,12 +183,53 @@ Layout Component:
} }
} }
.CDB-Button--loading {
.CDB-Button-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transform-origin: 50%;
opacity: 0;
z-index: 10;
}
.CDB-Button-Text {
@include transition(all 600ms);
}
&.is-loading {
cursor: default;
.CDB-Button-loader {
animation-name: showIn;
animation-duration: 600ms;
animation-fill-mode: forwards;
}
.CDB-Button-Text {
opacity: 0;
}
}
}
@keyframes showIn {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.CDB-Button--small { .CDB-Button--small {
padding: $baseSize / 2 $baseSize + 4; padding: $baseSize / 2 $baseSize + 4;
border-radius: 3px;
} }
.CDB-Button--big { .CDB-Button--big {
padding: $baseSize + 4 $baseSize + 12; padding: $baseSize + 3 $baseSize + 12;
} }
.CDB-Button--icon { .CDB-Button--icon {
@ -189,6 +247,15 @@ Layout Component:
background: darken($cBlue, 16%); background: darken($cBlue, 16%);
} }
&.is-loading {
&:hover {
background: $cBlue;
}
&:active {
background: $cBlue;
}
}
&.is-disabled { &.is-disabled {
&:hover { &:hover {
background: $cBlue; background: $cBlue;
@ -252,24 +319,44 @@ Layout Component:
# Buttons/Secondary # Buttons/Secondary
``` ```
<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled"> <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button> </button>
<button class="CDB-Button CDB-Button--secondary">
<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--secondary is-disabled"> <button class="CDB-Button CDB-Button--secondary is-disabled">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button> </button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled"> <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
@ -281,8 +368,13 @@ Layout Component:
<br/> <br/>
<div style="background: #2E3C43; padding: 20px;"> <div style="background: #2E3C43; padding: 20px;">
<button class="CDB-Button CDB-Button--secondary CDB-Button--big"> <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-blue">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled"> <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
@ -293,8 +385,13 @@ Layout Component:
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button> </button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--white"> <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
<div class="CDB-Button-loader CDB-LoaderIcon is-white">
<svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>
</button> </button>
<button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled"> <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
@ -338,6 +435,20 @@ Layout Component:
background: transparent; background: transparent;
} }
} }
&.is-loading {
cursor: default;
&:hover {
background: none;
color: $cBlue;
}
&:active {
background: none;
color: $cBlue;
}
}
} }
@ -363,4 +474,18 @@ Layout Component:
color: $cWhite; color: $cWhite;
} }
} }
&.is-loading {
cursor: default;
&:hover {
background: none;
color: $cWhite;
}
&:active {
background: none;
color: $cWhite;
}
}
} }

2
src/scss/cdb-variables/_colors.scss
View File

@ -15,7 +15,7 @@ $cThirdBackground: #F9F9F9;
//Lines //Lines
$cHoverLine: #AAA; $cHoverLine: #AAA;
$cMainLine: #DDD; $cMainLine: #DDD;
$cSecondaryLine: #EEE; $cSecondaryLine: rgba($cMainBg, 0.08);
//Typography //Typography
$cMainText: #2E3C43; $cMainText: #2E3C43;

11
styleguide/_template.html
View File

@ -1,5 +1,8 @@
<head> <head>
<link href='../css/cartostyles.css' type='text/css' rel='stylesheet'> <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>
</head> </head>
{{> theme}} {{> theme}}
@ -44,6 +47,11 @@
// Show section in Styleguide // Show section in Styleguide
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show(); j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
} }
$('.CDB-Button--loading').click(function(){
$(this).toggleClass("is-loading");
})
}); });
</script> </script>
@ -116,3 +124,6 @@
</div> </div>
{{/each}} {{/each}}
</div> </div>