Adds namespace
This commit is contained in:
Javier Arce
@@ -0,0 +1,135 @@
|
||||
// Colors styles
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Colors/structure
|
||||
|
||||
|
||||
```
|
||||
<div class="box Color-MainDark"></div>
|
||||
<div class="box Color-SecondaryDark"></div>
|
||||
<div class="box Color-Blue"></div>
|
||||
<div class="box Color-White"></div>
|
||||
<div class="box Color-SecondaryBackground"></div>
|
||||
<div class="box Color-ThirdBackground"></div>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../cdb-variables/colors';
|
||||
|
||||
.box {
|
||||
width: 120px;
|
||||
height: 64px;
|
||||
display: inline-block;
|
||||
margin: 0 24px 24px 0;
|
||||
}
|
||||
|
||||
.Color-Blue {
|
||||
background: $cBlue;
|
||||
}
|
||||
.Color-White {
|
||||
background: $cWhite;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.Color-Dark {
|
||||
background: $cBlack;
|
||||
}
|
||||
|
||||
.Color-MainDark {
|
||||
background: $cMainDark;
|
||||
}
|
||||
.Color-SecondaryDark {
|
||||
background: $cSecondaryDark;
|
||||
}
|
||||
.Color-SecondaryBackground {
|
||||
background: $cSecondaryBackground;
|
||||
}
|
||||
.Color-ThirdBackground {
|
||||
background: $cThirdBackground;
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Colors/line
|
||||
|
||||
|
||||
```
|
||||
<div class="box Color-Blue"></div>
|
||||
<div class="box Color-HoverLine"></div>
|
||||
<div class="box Color-MainLine"></div>
|
||||
<div class="box Color-SecondaryLine"></div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
.Color-HoverLine {
|
||||
background: $cHoverLine;
|
||||
}
|
||||
.Color-MainLine {
|
||||
background: $cMainLine;
|
||||
}
|
||||
.Color-SecondaryLine {
|
||||
background: $cSecondaryLine;
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Colors/typography
|
||||
|
||||
|
||||
```
|
||||
<div class="box Color-MainDark"></div>
|
||||
<div class="box Color-Type02"></div>
|
||||
<div class="box Color-Type03"></div>
|
||||
<div class="box Color-Type04"></div>
|
||||
<div class="box Color-White"></div>
|
||||
<div class="box Color-Blue"></div>
|
||||
```
|
||||
*/
|
||||
|
||||
|
||||
.Color-Type02 {
|
||||
background: $cTypo2;
|
||||
}
|
||||
.Color-Type03 {
|
||||
background: $cTypo3;
|
||||
}
|
||||
.Color-Type04 {
|
||||
background: $cTypo4;
|
||||
}
|
||||
|
||||
|
||||
/* SG
|
||||
# Colors/other
|
||||
|
||||
|
||||
```
|
||||
<div class="box Color-Higlight"></div>
|
||||
<div class="box Color-Alert"></div>
|
||||
<div class="box Color-Public"></div>
|
||||
<div class="box Color-Link"></div>
|
||||
<div class="box Color-Password"></div>
|
||||
<div class="box Color-Error"></div>
|
||||
```
|
||||
*/
|
||||
|
||||
.Color-Higlight {
|
||||
background: $cHighlight;
|
||||
}
|
||||
.Color-Alert {
|
||||
background: $cAlert;
|
||||
}
|
||||
.Color-Public {
|
||||
background: $cPublic;
|
||||
}
|
||||
.Color-Link {
|
||||
background: $cLink;
|
||||
}
|
||||
.Color-Password {
|
||||
background: $cPassword;
|
||||
}
|
||||
.Color-Error {
|
||||
background: $cError;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
// Loader styles
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Loader
|
||||
|
||||
This is the generic loader for widgets, maps, components, ...
|
||||
There is only one state 'is-visible', in order to make it visible.
|
||||
|
||||
```
|
||||
<div class="CDB-Loader is-visible"></div>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../cdb-utilities/mixins';
|
||||
|
||||
.CDB-Loader {
|
||||
@include css3-prefix(animation, loader-progress 1000ms linear 1);
|
||||
@include opacity(0);
|
||||
@include transition(opacity, 1000ms);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: rgba(#3AA9E3, 1);
|
||||
z-index: 10;
|
||||
}
|
||||
.CDB-Loader.is-visible {
|
||||
@include css3-prefix(animation, loader-progress 2000ms linear infinite);
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
@include keyframes(loader-progress) {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
// Shapes 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);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// Typography styles
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Typography
|
||||
|
||||
```
|
||||
<p class="Text Size-huge">Open Sans 26/34 Regular</p>
|
||||
<p class="Text Size-large">Open Sans 16/22 Regular</p>
|
||||
<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
|
||||
<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
|
||||
<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
|
||||
<p class="Text Size-small">Open Sans 10/14 Regular</p>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../cdb-variables/sizes';
|
||||
|
||||
.Text {
|
||||
font-family: 'Open Sans';
|
||||
$sFontWeight-normal: 400;
|
||||
|
||||
&.is-semibold {
|
||||
font-weight: $sFontWeight-semibold;
|
||||
}
|
||||
&.is-light {
|
||||
font-weight: $sFontWeight-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.Size-huge {
|
||||
font-size: $sFontSize-huge;
|
||||
line-height: $sLineHeight-huge;
|
||||
}
|
||||
|
||||
.Size-large {
|
||||
font-size: $sFontSize-large;
|
||||
line-height: $sLineHeight-large;
|
||||
}
|
||||
|
||||
.Size-medium {
|
||||
font-size: $sFontSize-medium;
|
||||
line-height: $sLineHeight-medium;
|
||||
}
|
||||
|
||||
.Size-small {
|
||||
font-size: $sFontSize-small;
|
||||
line-height: $sLineHeight-small;
|
||||
}
|
||||
Reference in New Issue
Block a user