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

first commit

Browse Source
This commit is contained in:
Emilio García 2016-01-20 17:13:54 +01:00
parent eab88d5904
commit dda91b1122
4 changed files with 277 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/scss/components/forms.scss Normal file
View File

@ -0,0 +1,115 @@
// Menu styles
// ----------------------------------------------
/* SG
# Forms/Radio
```
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
<input class="CDB-Radio" type="radio" name="Gender" value="01">
<input class="CDB-Radio" type="radio" name="Gender" value="02" disabled>
```
*/
@import '../variables/sizes';
@import '../variables/colors';
.CDB-Radio {
width: 16px;
height: 16px;
position: relative;
border: 1px solid #ddd;
border-radius: 50%;
&:before {
content:"";
position: absolute;
top: 50%;
left: 50%;
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
background: #F9F9F9;
display: block;
border-radius: 50%;
}
&:checked {
background: #3AA9E3;
border: 1px solid #3AA9E3;
&:before {
background: #fff;
}
}
&:focus {
border: 1px solid #3AA9E3;
}
&:disabled {
background: #F9F9F9;
border: 1px solid #EEEEEE;
&:before {
background: #fff;
}
}
}
/* SG
# Forms/Checkbox
```
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
```
*/
.CDB-Checkbox {
width: 16px;
height: 16px;
border: 1px solid #ddd;
border-radius: 3px;
&:checked {
background: #3AA9E3;
border: 1px solid #3AA9E3;
}
&:focus {
border: 1px solid #3AA9E3;
}
}
/* SG
# Forms/Inputs
```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-Input Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-Input has-error Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-Input is-disabled Text">
```
*/
.CDB-Input {
border: 1px solid #ddd;
border-radius: 3px;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
padding: 7px 8px 6px;
&:hover {
border: 1px solid #AAAAAA;
}
&:focus {
border: 1px solid #3AA9E3;
}
&:disabled {
background: #F9F9F9;
border-color: #EEEEEE;
}
&.has-error {
background: rgba($cError, .04);
border: 1px solid rgba($cError, .48);
color: $cError;
}
&::placeholder {
color: green;
}
}

136
src/scss/components/menu.scss Normal file
View File

@ -0,0 +1,136 @@
// Menu styles
// ----------------------------------------------
/* SG
# Menu/
```
<nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-Inner">
<li class="CDB-NavMenu-item"><a href="#">Layers</a></li>
<li class="CDB-NavMenu-item"><a href="#">Layers</a></li>
<li class="CDB-NavMenu-item"><a href="#">Layers</a></li>
</ul>
</nav>
```
*/
@import '../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;
}

25
src/scss/utilities/normalize.scss vendored
View File

@ -477,14 +477,20 @@ input {
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */ padding: 0; /* 2 */
outline: none;
cursor: pointer;
@if $legacy_browser_support { @if $legacy_browser_support {
*height: 13px; /* 3 */ *height: 13px; /* 3 */
*width: 13px; /* 3 */ *width: 13px; /* 3 */
} }
} }
/** /**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain * Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the * `font-size` values of the `input`, it causes the cursor style of the
@ -576,3 +582,22 @@ td,
th { th {
padding: 0; padding: 0;
} }
/* Forms
========================================================================== */
/**
* Remove default styles for forms
*/
input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
&[type="checkbox"],
&[type="radio"] {
cursor: pointer;
}
}

2
src/scss/variables/_sizes.scss
View File

@ -14,7 +14,7 @@ $sMargin-element: 14px; // To separate elements inside a group
// Font sizes // Font sizes
$sFontSize-small: 10px; $sFontSize-small: 10px;
$sFontSize-medium: 14px; $sFontSize-medium: 12px;
$sFontSize-large: 16px; $sFontSize-large: 16px;
$sFontSize-huge: 26px; $sFontSize-huge: 26px;