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

add more components

Browse Source
This commit is contained in:
Emilio García 2016-01-22 17:25:38 +01:00
parent 23f512b82d
commit 4203b5d675
11 changed files with 359 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.

21
src/scss/cdb-components/boxes.scss Normal file
View File

@ -0,0 +1,21 @@
// Menu styles
// ----------------------------------------------
/* SG
# Boxes/Box Dropdown
```
<div class="CDB-Box-Modal">&nbsp;</div>
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Box-Modal {
background: $cWhite;
border: 1px solid $cMainLine;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .16);
}

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

@ -0,0 +1,291 @@
// 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="01">
<input class="CDB-Radio" type="radio" name="Gender" value="02" disabled>
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Radio {
position: relative;
width: 16px;
height: 16px;
border: 1px solid $cMainLine;
border-radius: 50%;
&:before {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
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: 16px;
height: 16px;
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: 4px;
height: 8px;
transform: rotate(45deg);
}
&:after {
left: 4px;
height: 6px;
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-Input Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-Input has-error Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-Input is-disabled Text">
```
*/
.CDB-Input {
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: 4px;
height: 100%;
border-radius: 4px;
}
.CDB-Range::-webkit-slider-runnable-track {
height: 4px;
margin: 8px 0;
border-radius: 4px;
background: $cMainLine;
}
.CDB-Range::-webkit-slider-thumb:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -3000px;
height: 4px;
border-radius: 4px;
background: $cBlue;
content: '';
}
.CDB-Range::-webkit-slider-thumb:after {
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
width: 12px;
height: 12px;
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: 400px;">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-Input 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;
}

27
src/scss/cdb-components/lists.scss Normal file
View File

@ -0,0 +1,27 @@
// Menu styles
// ----------------------------------------------
/* SG
# Lists/Lists Decorations
```
<div class="CDB-Box-Modal">&nbsp;</div>
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-ListDecoration-Item {
border-bottom: 1px solid $cSecondaryLine;
&:last-child {
border-bottom: 0;
}
}
.CDB-ListDecoration-ItemLink {
display: block;
padding: 12px 16px;
}

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

@ -16,7 +16,7 @@
``` ```
*/ */
@import '../variables/colors'; @import '../cdb-variables/colors';
.box { .box {
width: 120px; width: 120px;

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

@ -2,250 +2,14 @@
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Shapes/dot # Shapes/Dot
You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
``` ```
<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button> <div class="CDB-Shape-tick is-black"></div>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button> <div class="CDB-Shape-tick is-blue"></div>
``` ```
*/ */
@import '../cdb-utilities/mixins'; @import '../cdb-utilities/mixins';
.CDB-Shape-dot {
display: inline-block;
width: 8px;
min-width: 8px;
height: 8px;
border-radius: 8px;
}
/* SG
# Shapes/threePoints
Description
```
<div></div>
```
*/
.CDB-Shape-threePoints {
display: inline-block;
position: relative;
width: 3px;
height: 16px;
margin-right: -7px;
margin-left: 6px;
padding: 0 7px 0 10px;
text-align: center;
vertical-align: middle;
&:after,
&:before {
display: inline-block;
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
content: '';
z-index: 1;
}
&:before {
top: 0;
right: 7px;
}
&:after {
right: 7px;
bottom: 1px;
}
&:hover {
cursor: pointer;
}
}
.CDB-Shape-threePointsItem {
display: block;
position: absolute;
top: 6px;
left: 7px;
width: 3px;
height: 3px;
border-radius: 50%;
}
/* SG
# Shapes/lens
Description
```
<div></div>
```
*/
.CDB-Shape-lens {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
&:after,
&:before {
position: absolute;
content: '';
}
&:after {
top: 0;
left: 0;
width: 8px;
height: 8px;
border: 1px solid transparent;
border-radius: 10px;
}
&:before {
@include css3-prefix(transform, rotate(45deg));
right: 3px;
bottom: 5px;
width: 6px;
height: 1px;
}
&:hover {
cursor: pointer;
}
}
/* SG
# Shapes/hamburguer
Description
```
<div></div>
```
*/
.CDB-Shape-hamburguer {
display: inline-block;
position: relative;
width: 16px;
height: 2px;
border: 0;
background: #FFF;
vertical-align: middle;
&:before,
&:after {
display: block;
position: absolute;
width: 16px;
height: 2px;
background: #FFF;
content: '';
}
&:before {
top: -6px;
}
&:after {
bottom: -6px;
}
}
/* SG
# Shapes/magnify
Description
```
<div></div>
```
*/
.CDB-Shape-magnify {
display: block;
position: relative;
width: 32px;
height: 32px;
&:before {
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 7px;
height: 7px;
border: 1px solid #636D72;
border-radius: 50%;
content: '';
}
&:after {
display: block;
position: absolute;
top: 17px;
left: 19px;
width: 1px;
height: 6px;
transform: rotate(314deg);
background: #636D72;
content: '';
}
}
/* SG
# Shapes/arrow
Description
```
<div></div>
```
*/
.CDB-Shape-Arrow {
display: block;
position: absolute;
width: 1px;
height: 8px;
background: #32A8E6;
&:before {
display: block;
position: absolute;
top: 2px;
left: 0;
width: 5px;
height: 1px;
transform: rotate(45deg);
background: #32A8E6;
content: '';
}
&:after {
display: block;
position: absolute;
top: 2px;
left: -4px;
width: 5px;
height: 1px;
transform: rotate(-45deg);
background: #32A8E6;
content: '';
}
}
.CDB-Shape-Arrow--top {
top: 6px;
right: 9px;
transform: rotate(45deg);
}
.CDB-Shape-Arrow--bottom {
top: 13px;
left: 46px;
transform: rotate(-135deg);
}

5
src/scss/cdb-utilities/normalize.scss vendored
View File

@ -489,6 +489,11 @@ input[type="radio"] {
*width: 13px; /* 3 */ *width: 13px; /* 3 */
} }
} }
input[type=range]::-webkit-slider-thumb {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
/** /**

115
src/scss/components/forms.scss
View File

@ -1,115 +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="01">
<input class="CDB-Radio" type="radio" name="Gender" value="02" disabled>
```
*/
@import '../variables/sizes';
@import '../variables/colors';
.CDB-Radio {
width: 16px;
height: 16px;
position: relative;
border: 1px solid #ddd;
border-radius: 50%;
&:before {
content:"";
position: absolute;
top: 50%;
left: 50%;
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
background: #F9F9F9;
display: block;
border-radius: 50%;
}
&:checked {
background: #3AA9E3;
border: 1px solid #3AA9E3;
&:before {
background: #fff;
}
}
&:focus {
border: 1px solid #3AA9E3;
}
&:disabled {
background: #F9F9F9;
border: 1px solid #EEEEEE;
&:before {
background: #fff;
}
}
}
/* SG
# Forms/Checkbox
```
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
```
*/
.CDB-Checkbox {
width: 16px;
height: 16px;
border: 1px solid #ddd;
border-radius: 3px;
&:checked {
background: #3AA9E3;
border: 1px solid #3AA9E3;
}
&:focus {
border: 1px solid #3AA9E3;
}
}
/* SG
# Forms/Inputs
```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-Input Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-Input has-error Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-Input is-disabled Text">
```
*/
.CDB-Input {
border: 1px solid #ddd;
border-radius: 3px;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
padding: 7px 8px 6px;
&:hover {
border: 1px solid #AAAAAA;
}
&:focus {
border: 1px solid #3AA9E3;
}
&:disabled {
background: #F9F9F9;
border-color: #EEEEEE;
}
&.has-error {
background: rgba($cError, .04);
border: 1px solid rgba($cError, .48);
color: $cError;
}
&::placeholder {
color: green;
}
}

11
src/scss/utilities/reset.scss
View File

@ -3,6 +3,8 @@
License: none (public domain) License: none (public domain)
*/ */
@import '../cdb-variables/colors';
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -58,3 +60,12 @@ button {
dd, dt { dd, dt {
display: inline-block; display: inline-block;
} }
a {
text-decoration: none;
color: $cBlue;
}
a:hover {
text-decoration: underline;
}