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

add checks

Browse Source
This commit is contained in:
piensaenpixel
2016-01-29 16:36:32 +01:00
parent d8a5d45cc3
commit 5024e786be
1 changed files with 76 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/shapes/check-circle.scss
+76 -8
View File
@@ -8,21 +8,21 @@ Description
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem"> <div class="CDB-Shape-CircleItem">
<div class="CDB-Shape-close is-xs"></div> <div class="CDB-Shape-tick is-medium"></div>
</div> </div>
</div> </div>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-blue"> <div class="CDB-Shape-CircleItem is-blue">
<div class="CDB-Shape-close is-xs is-blue"></div> <div class="CDB-Shape-tick is-medium is-blue"></div>
</div> </div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #2E3ya C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-CircleItem is-white"> <div class="CDB-Shape-CircleItem is-white">
<div class="CDB-Shape-close is-xs is-white"></div> <div class="CDB-Shape-tick is-medium is-white"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -34,21 +34,21 @@ Description
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-small"> <div class="CDB-Shape-CircleItem is-small">
<div class="CDB-Shape-close is-xxs is-white"></div> <div class="CDB-Shape-tick is-small"></div>
</div> </div>
</div> </div>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-CircleItem is-blue is-small"> <div class="CDB-Shape-CircleItem is-blue is-small">
<div class="CDB-Shape-close is-xxs is-white"></div> <div class="CDB-Shape-tick is-small is-blue"></div>
</div> </div>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-CircleItem is-white is-small"> <div class="CDB-Shape-CircleItem is-white is-small">
<div class="CDB-Shape-close is-xxs is-white"></div> <div class="CDB-Shape-tick is-small is-white"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -66,7 +66,7 @@ Description
&.is-small { &.is-small {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin: 2px auto; transform: translateY(2px);
} }
&.is-blue { &.is-blue {
border: 1px solid $cBlue; border: 1px solid $cBlue;
@@ -76,3 +76,71 @@ Description
} }
} }
.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;
}
}