add first shapes - #12
This commit is contained in:
piensaenpixel
parent
ea648f146d
commit
dc4819fe38
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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);
|
||||
}
|
||||
86
src/scss/cdb-components/shapes/arrow.scss
Normal file
86
src/scss/cdb-components/shapes/arrow.scss
Normal file
@ -0,0 +1,86 @@
|
||||
/* 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: '';
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Arrow--top {
|
||||
top: 6px;
|
||||
right: 9px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.CDB-Shape-Arrow--bottom {
|
||||
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;
|
||||
}
|
||||
}
|
||||
28
src/scss/cdb-components/shapes/dots.scss
Normal file
28
src/scss/cdb-components/shapes/dots.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
63
src/scss/cdb-components/shapes/hamburguer.scss
Normal file
63
src/scss/cdb-components/shapes/hamburguer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
70
src/scss/cdb-components/shapes/magnify.scss
Normal file
70
src/scss/cdb-components/shapes/magnify.scss
Normal file
@ -0,0 +1,70 @@
|
||||
/* SG
|
||||
# Shapes/Magnify
|
||||
|
||||
Description
|
||||
|
||||
```
|
||||
<div style="padding: 20px;">
|
||||
<div class="CDB-Shape-magnify"></div>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<div class="CDB-Shape-magnify is-blue"></div>
|
||||
</div>
|
||||
<div style="background: #2E3C43; padding: 20px;">
|
||||
<div class="CDB-Shape-magnify is-white"></div>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../../cdb-variables/colors';
|
||||
|
||||
.CDB-Shape-magnify {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid $cMainDark;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 19px;
|
||||
width: 1px;
|
||||
height: 6px;
|
||||
transform: rotate(314deg);
|
||||
background: $cMainDark;
|
||||
content: '';
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
64
src/scss/cdb-components/shapes/threePoints.scss
Normal file
64
src/scss/cdb-components/shapes/threePoints.scss
Normal file
@ -0,0 +1,64 @@
|
||||
/* SG
|
||||
# Shapes/Three Points
|
||||
|
||||
Description
|
||||
|
||||
```
|
||||
<div style="padding: 20px;">
|
||||
<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 style="padding: 20px;">
|
||||
<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 style="background: #2E3C43; padding: 20px;">
|
||||
<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>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../../cdb-variables/colors';
|
||||
|
||||
.CDB-Shape-threePoints {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
padding: 0 12;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-threePointsItem {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 50%;
|
||||
background: $cMainDark;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-blue {
|
||||
.CDB-Shape-threePointsItem {
|
||||
background: $cBlue;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-white {
|
||||
.CDB-Shape-threePointsItem {
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user