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

change vars

Browse Source
This commit is contained in:
piensaenpixel 2016-02-09 17:17:14 +01:00
parent cf97094b8c
commit 45c90f9cd9
20 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/scss/cdb-components/avatars.scss
View File

@ -16,7 +16,7 @@
<img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" /> <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
</li> </li>
<li class="CDB-AvatarList-itemMore"> <li class="CDB-AvatarList-itemMore">
<button class="CDB-Text is-semibold CDB-Size-small u-textSecondary">+ 16</button> <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
</li> </li>
</ul> </ul>
``` ```

6
src/scss/cdb-components/colors.scss
View File

@ -18,9 +18,9 @@
@import '../cdb-variables/colors'; @import '../cdb-variables/colors';
.box { .box {
display: inline-block;
width: 120px; width: 120px;
height: 64px; height: 64px;
display: inline-block;
margin: 0 24px 24px 0; margin: 0 24px 24px 0;
} }
@ -28,15 +28,15 @@
background: $cBlue; background: $cBlue;
} }
.Color-White { .Color-White {
border: 1px solid #E5E5E5;
background: $cWhite; background: $cWhite;
border: 1px solid #e5e5e5;
} }
.Color-Dark { .Color-Dark {
background: $cBlack; background: $cBlack;
} }
.Color-MainDark { .Color-MainDark {
background: $cMainDark; background: $cMainBgColor;
} }
.Color-SecondaryDark { .Color-SecondaryDark {
background: $cSecondaryDark; background: $cSecondaryDark;

2
src/scss/cdb-components/forms/toggle.scss
View File

@ -49,7 +49,7 @@
} }
&:checked + .CDB-ToggleFace { &:checked + .CDB-ToggleFace {
background: $cMainDark; background: $cMainBgColor;
&::before { &::before {
right: 2px; right: 2px;

4
src/scss/cdb-components/loader.scss
View File

@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ...
background: $cWhite; background: $cWhite;
} }
&.is-grey { &.is-grey {
background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%); background: linear-gradient(to right, $cMainBgColor 10%, rgba($cWhite, 0) 42%);
&::before { &::before {
background: $cTypo2; background: $cTypo2;
} }
&::after { &::after {
background: $cMainDark; background: $cMainBgColor;
} }
} }
} }

6
src/scss/cdb-components/menu.scss
View File

@ -97,8 +97,8 @@
} }
.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
border-bottom: 1px solid $cMainDark; border-bottom: 1px solid $cMainBgColor;
color: $cMainDark; color: $cMainBgColor;
} }
.CDB-NavSubmenu { .CDB-NavSubmenu {
@ -119,7 +119,7 @@
.CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-item.is-active {
.CDB-NavSubmenu-Link { .CDB-NavSubmenu-Link {
border-bottom: 1px solid $cTypo3; border-bottom: 1px solid $cTypo3;
color: $cMainDark; color: $cMainBgColor;
} }
} }

8
src/scss/cdb-components/shapes/add.scss
View File

@ -65,7 +65,7 @@ Description
bottom: 7px; bottom: 7px;
left: 0; left: 0;
height: 1px; height: 1px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
@ -76,7 +76,7 @@ Description
bottom: 0; bottom: 0;
left: 7px; left: 7px;
width: 1px; width: 1px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
} }
@ -90,7 +90,7 @@ Description
bottom: 7px; bottom: 7px;
left: 4px; left: 4px;
height: 1px; height: 1px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
@ -101,7 +101,7 @@ Description
bottom: 3px; bottom: 3px;
left: 8px; left: 8px;
width: 1px; width: 1px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
} }

6
src/scss/cdb-components/shapes/arrow.scss
View File

@ -22,7 +22,7 @@ Description
position: relative; position: relative;
width: 1px; width: 1px;
height: 8px; height: 8px;
background: $cMainDark; background: $cMainBgColor;
&::before { &::before {
display: block; display: block;
@ -32,7 +32,7 @@ Description
width: 5px; width: 5px;
height: 1px; height: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
@ -44,7 +44,7 @@ Description
width: 5px; width: 5px;
height: 1px; height: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
&.is-up { &.is-up {

6
src/scss/cdb-components/shapes/check-circle.scss
View File

@ -60,7 +60,7 @@ Description
.CDB-Shape-CircleItem { .CDB-Shape-CircleItem {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 1px solid $cMainDark; border: 1px solid $cMainBgColor;
border-radius: 50%; border-radius: 50%;
&.is-small { &.is-small {
@ -86,7 +86,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
&::after { &::after {
@ -94,7 +94,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }

4
src/scss/cdb-components/shapes/close.scss
View File

@ -55,7 +55,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
&::after { &::after {
@ -63,7 +63,7 @@ Description
position: absolute; position: absolute;
width: 1px; width: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }

2
src/scss/cdb-components/shapes/dash.scss
View File

@ -56,7 +56,7 @@ Description
bottom: 7px; bottom: 7px;
left: 2px; left: 2px;
height: 1px; height: 1px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
} }

8
src/scss/cdb-components/shapes/dataset.scss
View File

@ -95,7 +95,7 @@ Description
width: 9px; width: 9px;
height: 9px; height: 9px;
margin-left: -10px; margin-left: -10px;
border: 1px solid $cMainDark; border: 1px solid $cMainBgColor;
border-radius: 50%; border-radius: 50%;
background: $cWhite; background: $cWhite;
@ -132,15 +132,15 @@ Description
.CDB-Shape-Dataset.is-white { .CDB-Shape-Dataset.is-white {
.CDB-Shape-DatasetItem { .CDB-Shape-DatasetItem {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
background: $cMainDark; background: $cMainBgColor;
&:first-child { &:first-child {
box-shadow: 3px 0 $cMainDark; box-shadow: 3px 0 $cMainBgColor;
} }
} }
} }
.CDB-Shape-Dataset.is-white.is-small { .CDB-Shape-Dataset.is-white.is-small {
.CDB-Shape-DatasetItem:first-child { .CDB-Shape-DatasetItem:first-child {
box-shadow: 2px 0 $cMainDark; box-shadow: 2px 0 $cMainBgColor;
} }
} }

2
src/scss/cdb-components/shapes/error-circle.scss
View File

@ -60,7 +60,7 @@ Description
.CDB-Shape-CircleItem { .CDB-Shape-CircleItem {
width: 13px; width: 13px;
height: 13px; height: 13px;
border: 1px solid $cMainDark; border: 1px solid $cMainBgColor;
border-radius: 50%; border-radius: 50%;
&.is-small { &.is-small {

2
src/scss/cdb-components/shapes/hamburguer.scss
View File

@ -43,7 +43,7 @@ Description
.CDB-Shape-hamburguerItem { .CDB-Shape-hamburguerItem {
height: $baseSize / 4; height: $baseSize / 4;
margin-bottom: $baseSize / 4; margin-bottom: $baseSize / 4;
background: $cMainDark; background: $cMainBgColor;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

4
src/scss/cdb-components/shapes/magnify.scss
View File

@ -58,7 +58,7 @@ Description
left: 0; left: 0;
width: 11px; width: 11px;
height: 11px; height: 11px;
border: 1px solid $cMainDark; border: 1px solid $cMainBgColor;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
} }
@ -71,7 +71,7 @@ Description
width: 1px; width: 1px;
height: 7px; height: 7px;
transform: rotate(314deg); transform: rotate(314deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
} }

4
src/scss/cdb-components/shapes/move.scss
View File

@ -101,7 +101,7 @@ Description
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height: 3px; height: 3px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
@ -110,7 +110,7 @@ Description
width: 3px; width: 3px;
height: 3px; height: 3px;
margin-left: 2px; margin-left: 2px;
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
} }

2
src/scss/cdb-components/shapes/threePoints.scss
View File

@ -77,7 +77,7 @@ Description
width: 2px; width: 2px;
height: 2px; height: 2px;
margin-bottom: 5px; margin-bottom: 5px;
background: $cMainDark; background: $cMainBgColor;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }

4
src/scss/cdb-components/shapes/toogle-arrow.scss
View File

@ -97,7 +97,7 @@ Description
width: 10px; width: 10px;
height: 1px; height: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
&::after { &::after {
@ -108,7 +108,7 @@ Description
width: 10px; width: 10px;
height: 1px; height: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: $cMainDark; background: $cMainBgColor;
content: ''; content: '';
} }
} }

2
src/scss/cdb-components/typography.scss
View File

@ -10,7 +10,7 @@
<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p> <p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p> <p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
<p class="CDB-Text is-semibold is-upper CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p> <p class="CDB-Text is-semibold is-upper CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
<p class="CDB-Text CDB-Size-medium u-textSecondary">Open Sans 12/16 Regular</p> <p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p> <p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p> <p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p> <p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>

4
src/scss/cdb-utilities/helpers.scss
View File

@ -43,9 +43,9 @@
// ---------------------------------------------- // ----------------------------------------------
.u-mainTextColor { .u-mainTextColor {
color: $cMainDark; color: $cMainTextColor;
} }
.u-textSecondary { .u-secondaryTextColor {
color: $cTypo2; color: $cTypo2;
} }
.u-altTextColor { .u-altTextColor {

10
src/scss/cdb-variables/_colors.scss
View File

@ -5,7 +5,7 @@
$cBlue: #3AA9E3; $cBlue: #3AA9E3;
$cBlack: #000; $cBlack: #000;
$cWhite: #FFF; $cWhite: #FFF;
$cMainDark: #2E3C43; $cMainBgColor: #2E3C43;
//Structure //Structure
$cSecondaryDark: #282C2F; $cSecondaryDark: #282C2F;
@ -18,10 +18,10 @@ $cMainLine: #DDD;
$cSecondaryLine: #EEE; $cSecondaryLine: #EEE;
//Typography //Typography
$cTypoMain: #2E3C43; $cMainTextColor: #2E3C43;
$cTypo2: #636D72; $cSecondaryTextColor: #636D72;
$cTypo3: #979EA1; $cAltTextColor: #979EA1;
$cTypo4: #CBCED0; $cHintTextColor: #CBCED0;
//Others //Others
$cHighlight: #9DE0AD; $cHighlight: #9DE0AD;