first commit
This commit is contained in:
Emilio García
parent
eab88d5904
commit
dda91b1122
115
src/scss/components/forms.scss
Normal file
115
src/scss/components/forms.scss
Normal 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
136
src/scss/components/menu.scss
Normal 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
25
src/scss/utilities/normalize.scss
vendored
@ -477,14 +477,20 @@ input {
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
@if $legacy_browser_support {
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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
|
||||
@ -576,3 +582,22 @@ td,
|
||||
th {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ $sMargin-element: 14px; // To separate elements inside a group
|
||||
|
||||
// Font sizes
|
||||
$sFontSize-small: 10px;
|
||||
$sFontSize-medium: 14px;
|
||||
$sFontSize-medium: 12px;
|
||||
$sFontSize-large: 16px;
|
||||
$sFontSize-huge: 26px;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user