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

Merge pull request #36 from CartoDB/12-fix_shapes

Browse Source 
12 fix shapes
This commit is contained in:
piensaenpixel
2016-02-01 18:25:37 +01:00
parent c11028772e bff9be2be6
commit a00c77733a
17 changed files with 1250 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

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.

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

@@ -1,252 +0,0 @@
// Shape styles
// ----------------------------------------------
/* SG
# Shapes/Dot
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>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
```
*/
@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);
}

126
src/scss/cdb-components/shapes/add.scss Normal file
View File

@@ -0,0 +1,126 @@
/* SG
# Shapes/Add
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-add"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-add is-blue"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-add is-white"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-add is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-add is-blue is-small"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-add is-white is-small"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center;
&:hover {
cursor: pointer;
}
}
.CDB-Shape-add {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
right: 1px;
bottom: 7px;
left: 0;
height: 1px;
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
top: 1;
bottom: 0;
left: 7px;
width: 1px;
background: $cMainDark;
content: '';
}
}
.CDB-Shape-add.is-small {
&::before {
display: block;
position: absolute;
right: 3px;
bottom: 7px;
left: 4px;
height: 1px;
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
top: 4px;
bottom: 3px;
left: 8px;
width: 1px;
background: $cMainDark;
content: '';
}
}
.CDB-Shape-add.is-blue {
&::before,
&::after {
background: $cBlue;
}
}
.CDB-Shape-add.is-white {
&::before,
&::after {
background: $cWhite;
}
}

85
src/scss/cdb-components/shapes/arrow.scss Normal file
View File

@@ -0,0 +1,85 @@
/* SG
# Shapes/Arrow
Description
```
<div style="padding: 20px;">
<div class="CDB-Shape-Arrow"></div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape-Arrow is-blue"></div>
</div>
<div style="padding: 20px; background: #2E3C43">
<div class="CDB-Shape-Arrow is-white"></div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-Arrow {
position: relative;
width: 1px;
height: 8px;
background: $cMainDark;
&::before {
display: block;
position: absolute;
top: 2px;
left: 0;
width: 5px;
height: 1px;
transform: rotate(45deg);
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
top: 2px;
left: -4px;
width: 5px;
height: 1px;
transform: rotate(-45deg);
background: $cMainDark;
content: '';
}
&.is-up {
top: 6px;
right: 9px;
transform: rotate(45deg);
}
&.is-down {
top: 13px;
left: 46px;
transform: rotate(-135deg);
}
}
.CDB-Shape-Arrow.is-blue {
background: $cBlue;
&::before {
background: $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-Shape-Arrow.is-white {
background: $cWhite;
&::before {
background: $cWhite;
}
&::after {
background: $cWhite;
}
}

146
src/scss/cdb-components/shapes/check-circle.scss Normal file
View File

@@ -0,0 +1,146 @@
/* SG
# Shapes/Check circle
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem">
<div class="CDB-Shape-tick is-medium"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-blue">
<div class="CDB-Shape-tick is-medium is-blue"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-CircleItem is-white">
<div class="CDB-Shape-tick is-medium is-white"></div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-small">
<div class="CDB-Shape-tick is-small"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-blue is-small">
<div class="CDB-Shape-tick is-small is-blue"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-CircleItem is-white is-small">
<div class="CDB-Shape-tick is-small is-white"></div>
</div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-CircleItem {
width: 14px;
height: 14px;
border: 1px solid $cMainDark;
border-radius: 50%;
&.is-small {
width: 12px;
height: 12px;
transform: translateY(2px);
}
&.is-blue {
border: 1px solid $cBlue;
}
&.is-white {
border: 1px solid $cWhite;
}
}
.CDB-Shape-tick {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: $cMainDark;
content: '';
}
&.is-medium {
&::before {
top: 6px;
left: 4px;
height: 4px;
}
&::after {
top: 4px;
right: 5px;
height: 7px;
}
}
&.is-small {
&::before {
top: 5px;
left: 3px;
height: 3px;
}
&::after {
top: 3px;
right: 3px;
height: 5px;
}
}
}
.CDB-Shape-tick.is-blue {
&::before {
background: $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-Shape-tick.is-white {
&::before {
background: $cWhite;
}
&::after {
background: $cWhite;
}
}

139
src/scss/cdb-components/shapes/close.scss Normal file
View File

@@ -0,0 +1,139 @@
/* SG
# Shapes/Close
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-huge"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-blue is-huge"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-close is-white is-huge"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-large"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-close is-white is-large"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-close {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: $cMainDark;
content: '';
}
&.is-huge {
&::before {
top: -2px;
left: 7px;
height: 20px;
}
&::after {
top: -2px;
right: 8px;
height: 20px;
}
}
&.is-large {
&::before {
top: 2px;
left: 7px;
height: 12px;
}
&::after {
top: 2px;
right: 8px;
height: 12px;
}
}
&.is-medium {
&::before {
top: 3px;
left: 6px;
height: 7px;
}
&::after {
top: 3px;
right: 6px;
height: 7px;
}
}
&.is-small {
&::before {
top: 2px;
left: 4px;
height: 5px;
}
&::after {
top: 2px;
right: 4px;
height: 5px;
}
}
}
.CDB-Shape-close.is-blue {
&::before {
background: $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-Shape-close.is-white {
&::before {
background: $cWhite;
}
&::after {
background: $cWhite;
}
}

85
src/scss/cdb-components/shapes/dash.scss Normal file
View File

@@ -0,0 +1,85 @@
/* SG
# Shapes/Dash
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-dash"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-dash is-blue"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-dash is-white"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-dash is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-dash is-blue is-small"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-dash is-white is-small"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-dash {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
right: 2px;
bottom: 7px;
left: 2px;
height: 1px;
background: $cMainDark;
content: '';
}
}
.CDB-Shape-dash.is-small {
&::before {
right: 3px;
left: 3px;
}
}
.CDB-Shape-dash.is-blue {
&::before {
background: $cBlue;
}
}
.CDB-Shape-dash.is-white {
&::before {
background: $cWhite;
}
}

28
src/scss/cdb-components/shapes/dots.scss Normal file
View File

@@ -0,0 +1,28 @@
// Shape styles
// ----------------------------------------------
/* SG
# Shapes/Dots
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>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-dot {
display: inline-block;
width: $baseSize;
height: $baseSize;
border-radius: 50%;
background: $cSecondaryLine;
&.is-selected {
background: $cTypo2;
}
}

77
src/scss/cdb-components/shapes/error-circle.scss Normal file
View File

@@ -0,0 +1,77 @@
/* SG
# Shapes/Error circle
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem">
<div class="CDB-Shape-close is-medium"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-blue">
<div class="CDB-Shape-close is-medium is-blue"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-CircleItem is-white">
<div class="CDB-Shape-close is-medium is-white"></div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-small">
<div class="CDB-Shape-close is-small"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-blue is-small">
<div class="CDB-Shape-close is-small is-blue"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-CircleItem is-white is-small">
<div class="CDB-Shape-close is-small is-white"></div>
</div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;
border: 1px solid $cMainDark;
border-radius: 50%;
&.is-small {
width: 9px;
height: 9px;
margin: 2px auto;
}
&.is-blue {
border: 1px solid $cBlue;
}
&.is-white {
border: 1px solid $cWhite;
}
}

63
src/scss/cdb-components/shapes/hamburguer.scss Normal file
View File

@@ -0,0 +1,63 @@
/* SG
# Shapes/Hamburguer
Description
```
<div style="padding: 20px">
<div class="CDB-Shape-hamburguer">
<div class="CDB-Shape-hamburguerItem"></div>
<div class="CDB-Shape-hamburguerItem"></div>
<div class="CDB-Shape-hamburguerItem"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape-hamburguer is-blue">
<div class="CDB-Shape-hamburguerItem"></div>
<div class="CDB-Shape-hamburguerItem"></div>
<div class="CDB-Shape-hamburguerItem"></div>
</div>
</div>
<div style="background: #2E3C43; padding: 20px;">
<div class="CDB-Shape-hamburguer is-white">
<div class="CDB-Shape-hamburguerItem"></div>
<div class="CDB-Shape-hamburguerItem"></div>
<div class="CDB-Shape-hamburguerItem"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
@import '../../cdb-variables/sizes';
.CDB-Shape-hamburguer {
width: $baseSize * 2;
&:hover {
cursor: pointer;
}
}
.CDB-Shape-hamburguerItem {
height: $baseSize / 4;
margin-bottom: $baseSize / 4;
background: $cMainDark;
&:last-child {
margin-bottom: 0;
}
}
.CDB-Shape-hamburguer.is-blue {
.CDB-Shape-hamburguerItem {
background: $cBlue;
}
}
.CDB-Shape-hamburguer.is-white {
.CDB-Shape-hamburguerItem {
background: $cWhite;
}
}

115
src/scss/cdb-components/shapes/magnify.scss Normal file
View File

@@ -0,0 +1,115 @@
/* SG
# Shapes/Magnify
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-blue"></div>
</div>
</div>
<div style="background: #2E3C43; padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-white"></div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-blue is-small"></div>
</div>
</div>
<div style="background: #2E3C43; padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-magnify is-white is-small"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-magnify {
display: block;
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border: 1px solid $cMainDark;
border-radius: 50%;
content: '';
}
&::after {
display: block;
position: absolute;
right: 2px;
bottom: -1px;
width: 1px;
height: 7px;
transform: rotate(314deg);
background: $cMainDark;
content: '';
}
}
.CDB-Shape-magnify.is-blue {
&::before {
border: 1px solid $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-Shape-magnify.is-white {
&::before {
border: 1px solid $cWhite;
}
&::after {
background: $cWhite;
}
}
.CDB-Shape-magnify.is-small {
&::before {
top: 3px;
left: 3px;
width: 6px;
height: 6px;
}
&::after {
display: block;
position: absolute;
right: 4px;
bottom: 2px;
width: 1px;
height: 5px;
transform: rotate(314deg);
content: '';
}
}

130
src/scss/cdb-components/shapes/move.scss Normal file
View File

@@ -0,0 +1,130 @@
/* SG
# Shapes/Move
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-Move">
<div class="CDB-Shape-MoveItem is-first"></div>
<div class="CDB-Shape-MoveItem is-second"></div>
<div class="CDB-Shape-MoveItem is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-Move">
<div class="CDB-Shape-MoveItem is-blue is-first"></div>
<div class="CDB-Shape-MoveItem is-blue is-second"></div>
<div class="CDB-Shape-MoveItem is-blue is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-Move">
<div class="CDB-Shape-MoveItem is-white is-first"></div>
<div class="CDB-Shape-MoveItem is-white is-second"></div>
<div class="CDB-Shape-MoveItem is-white is-third"></div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-Move is-small">
<div class="CDB-Shape-MoveItem is-first"></div>
<div class="CDB-Shape-MoveItem is-second"></div>
<div class="CDB-Shape-MoveItem is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-Move is-small">
<div class="CDB-Shape-MoveItem is-blue is-first"></div>
<div class="CDB-Shape-MoveItem is-blue is-second"></div>
<div class="CDB-Shape-MoveItem is-blue is-third"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-Move is-small">
<div class="CDB-Shape-MoveItem is-white is-first"></div>
<div class="CDB-Shape-MoveItem is-white is-second"></div>
<div class="CDB-Shape-MoveItem is-white is-third"></div>
</div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-Move {
padding: 1px 0 0;
}
.CDB-Shape-Move.is-small {
padding: 3px 0 0 1px;
.CDB-Shape-MoveItem {
margin-bottom: 2px;
&::before {
width: 2px;
height: 2px;
}
&::after {
width: 2px;
height: 2px;
margin-left: 1px;
}
}
}
.CDB-Shape-MoveItem {
margin-bottom: 3px;
&:last-child {
margin-bottom: 0;
}
&::before {
display: inline-block;
width: 3px;
height: 3px;
background: $cMainDark;
content: '';
}
&::after {
display: inline-block;
width: 3px;
height: 3px;
margin-left: 2px;
background: $cMainDark;
content: '';
}
}
.CDB-Shape-MoveItem.is-blue {
&::before,
&::after {
background: $cBlue;
}
}
.CDB-Shape-MoveItem.is-white {
&::before,
&::after {
background: $cWhite;
}
}

108
src/scss/cdb-components/shapes/threePoints.scss Normal file
View File

@@ -0,0 +1,108 @@
/* SG
# Shapes/Three Points
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-white">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-small">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-blue is-small">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-white is-small">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-Shape-threePoints {
display: inline-block;
height: 100%;
}
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 5px;
background: $cMainDark;
&:last-child {
margin-bottom: 0;
}
}
.CDB-Shape-threePoints.is-small {
padding-top: 2px;
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px;
}
}
.CDB-Shape-threePoints.is-blue {
.CDB-Shape-threePointsItem {
background: $cBlue;
}
}
.CDB-Shape-threePoints.is-white {
.CDB-Shape-threePointsItem {
background: $cWhite;
}
}

147
src/scss/cdb-components/shapes/toogle-arrow.scss Normal file
View File

@@ -0,0 +1,147 @@
/* SG
# Shapes/Toogle Arrows
Description
```
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-blue"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToogle is-white"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-small"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-blue is-small"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToogle is-white is-small"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>16px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-down"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-blue is-down"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToogle is-white is-down"></div>
</div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-small is-down"></div>
</div>
</div>
<div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-ArrowToogle is-blue is-small is-down"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-ArrowToogle is-white is-small is-down"></div>
</div>
</div>
```
*/
@import '../../cdb-variables/colors';
.CDB-ArrowToogle {
position: relative;
height: 100%;
&::before {
display: block;
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 1px;
transform: rotate(-45deg);
background: $cMainDark;
content: '';
}
&::after {
display: block;
position: absolute;
top: 8px;
right: -1px;
width: 10px;
height: 1px;
transform: rotate(45deg);
background: $cMainDark;
content: '';
}
}
.CDB-ArrowToogle.is-down {
transform: rotate(180deg);
}
.CDB-ArrowToogle.is-small {
&::before {
left: 2px;
width: 8px;
}
&::after {
right: 1px;
width: 8px;
}
}
.CDB-ArrowToogle.is-blue {
&::before {
background: $cBlue;
}
&::after {
background: $cBlue;
}
}
.CDB-ArrowToogle.is-white {
&::before {
background: $cWhite;
}
&::after {
background: $cWhite;
}
}