Moved common styles from CartoDB.js and Deep-insights to CartoAssets
This commit is contained in:
xavijam
parent
4b73fe68de
commit
d5592585f3
@ -1 +1 @@
|
||||
.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}
|
||||
.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}.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}.CDB-Shape-threePoints:after,.CDB-Shape-threePoints:before{display:inline-block;position:absolute;width:3px;height:3px;border-radius:50%;content:'';z-index:1}.CDB-Shape-threePoints:before{top:0;right:7px}.CDB-Shape-threePoints:after{right:7px;bottom:1px}.CDB-Shape-threePoints:hover{cursor:pointer}.CDB-Shape-threePointsItem{display:block;position:absolute;top:6px;left:7px;width:3px;height:3px;border-radius:50%}.CDB-Shape-lens{display:inline-block;position:relative;width:16px;height:16px}.CDB-Shape-lens:after,.CDB-Shape-lens:before{position:absolute;content:''}.CDB-Shape-lens:after{top:0;left:0;width:8px;height:8px;border:1px solid transparent;border-radius:10px}.CDB-Shape-lens:before{-webkit-transform:rotate(45deg);-khtml-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);right:3px;bottom:5px;width:6px;height:1px}.CDB-Shape-lens:hover{cursor:pointer}.CDB-Shape-hamburguer{display:inline-block;position:relative;width:16px;height:2px;border:0;background:#FFF;vertical-align:middle}.CDB-Shape-hamburguer:before,.CDB-Shape-hamburguer:after{display:block;position:absolute;width:16px;height:2px;background:#FFF;content:''}.CDB-Shape-hamburguer:before{top:-6px}.CDB-Shape-hamburguer:after{bottom:-6px}.CDB-Shape-magnify{display:block;position:relative;width:32px;height:32px}.CDB-Shape-magnify:before{display:block;position:absolute;top:10px;left:10px;width:7px;height:7px;border:1px solid #636D72;border-radius:50%;content:''}.CDB-Shape-magnify:after{display:block;position:absolute;top:17px;left:19px;width:1px;height:6px;transform:rotate(314deg);background:#636D72;content:''}.CDB-Shape-Arrow{display:block;position:absolute;width:1px;height:8px;background:#32A8E6}.CDB-Shape-Arrow:before{display:block;position:absolute;top:2px;left:0;width:5px;height:1px;transform:rotate(45deg);background:#32A8E6;content:''}.CDB-Shape-Arrow: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)}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
// Shapes styles
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Shapes/dot
|
||||
|
||||
@ -8,8 +11,8 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
|
||||
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
|
||||
```
|
||||
*/
|
||||
// Shapes styles
|
||||
// ----------------------------------------------
|
||||
|
||||
@import '../utilities/mixins';
|
||||
|
||||
.CDB-Shape-dot {
|
||||
display: inline-block;
|
||||
@ -18,3 +21,231 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
|
||||
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);
|
||||
}
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
// Sizes variables
|
||||
// ----------------------------------------------
|
||||
|
||||
// Widths
|
||||
$desktopLayout: 352px;
|
||||
$mobileLayout: 280px;
|
||||
|
||||
// Margins
|
||||
$sMargin-section: 24px; // To separate main section
|
||||
$sMargin-element: 14px; // To separate elements inside a group
|
||||
|
||||
// Font sizes
|
||||
$sFontSize-smaller: 10px;
|
||||
$sFontSize-small: 12px;
|
||||
$sFontSize-normal: 14px;
|
||||
$sFontSize-larger: 16px;
|
||||
$sFontSize-huge: 26px;
|
||||
|
||||
// Font weights
|
||||
$sFontWeight-lighter: 300;
|
||||
$sFontWeight-normal: 400;
|
||||
$sFontWeight-semibold: 600;
|
||||
$sFontWeight-bold: 700;
|
||||
|
||||
// Line heights
|
||||
$sLineHeight-smaller: 15px;
|
||||
$sLineHeight-small: 16px;
|
||||
$sLineHeight-normal: 20px;
|
||||
$sLineHeight-large: 22px;
|
||||
$sLineHeight-larger: 24px;
|
||||
$sLineHeight-largest: 27px;
|
||||
$sLineHeight-huge: 34px;
|
||||
$sLineHeight-button: 15px;
|
||||
Loading…
Reference in New Issue
Block a user