From 4203b5d675be126a5f1d835b5bc34923f917a66e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Fri, 22 Jan 2016 17:25:38 +0100 Subject: [PATCH] add more components --- src/fonts/cartoIcon.eot | Bin 17808 -> 17808 bytes src/fonts/cartoIcon.ttf | Bin 17636 -> 17636 bytes src/fonts/cartoIcon.woff | Bin 11164 -> 11164 bytes src/scss/cdb-components/boxes.scss | 21 ++ src/scss/cdb-components/forms.scss | 291 ++++++++++++++++++ src/scss/cdb-components/lists.scss | 27 ++ .../{components => cdb-components}/menu.scss | 2 +- src/scss/cdb-components/shapes.scss | 242 +-------------- src/scss/cdb-utilities/normalize.scss | 5 + src/scss/components/forms.scss | 115 ------- src/scss/utilities/reset.scss | 11 + 11 files changed, 359 insertions(+), 355 deletions(-) create mode 100644 src/scss/cdb-components/boxes.scss create mode 100644 src/scss/cdb-components/forms.scss create mode 100644 src/scss/cdb-components/lists.scss rename src/scss/{components => cdb-components}/menu.scss (98%) delete mode 100644 src/scss/components/forms.scss diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 887caac99fec28a32ebaa6262222bb6b13fa049a..dfafb577d34d6b3edcdf64fea35f8d2f9af78d73 100644 GIT binary patch delta 55 zcmbQx%{T#wY?z-uyfx8&9dn(-wuv96O5b|;G@jq)D+4#G;XFFnaR>#t+T_ D!D1Ox diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 2cfff3c297a5dd29c37ac87c495fe7d659e1c7b0..76369cd9881fce881e4957d008dd666a5329736c 100644 GIT binary patch delta 47 wcmaFT$@rv`ae^arox`??E>op%J$xF^Z}XLboADO|5L`O`{~3(l_~nB$0P5Hk!vFvP delta 47 wcmaFT$@rv`ae^ar?Uf@FU8YLk-gz>f-{va=H{&k`Ah>k={hxwy}IlBq^KMTI2a`zA|t#{sM|HTsr>$8H|2Y{{K5y1mhnd TmxF-`Bnkk_))5D@?{ga#IbxzBq>|#GUNGezA|t#{sM|HTsnU8EsTCs{{K5y1mhnd TmxF-`Bnkkxkq~CH?  +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Box-Modal { + background: $cWhite; + border: 1px solid $cMainLine; + border-radius: 4px; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .16); +} diff --git a/src/scss/cdb-components/forms.scss b/src/scss/cdb-components/forms.scss new file mode 100644 index 0000000..655dae5 --- /dev/null +++ b/src/scss/cdb-components/forms.scss @@ -0,0 +1,291 @@ +// Menu styles +// ---------------------------------------------- + +/* SG +# Forms/Radio + + +``` + + + +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Radio { + position: relative; + width: 16px; + height: 16px; + border: 1px solid $cMainLine; + border-radius: 50%; + + &:before { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 6px; + height: 6px; + margin-top: -3px; + margin-left: -3px; + border-radius: 50%; + background: $cSecondaryLine; + content: ''; + } + + &:checked { + border: 1px solid $cBlue; + background: $cBlue; + + &:hover { + border: 1px solid $cBlue; + } + + &:before { + background: $cWhite; + } + } + + &:focus { + border: 1px solid $cBlue; + } + + &:hover { + border: 1px solid $cHoverLine; + } + + &:disabled { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &:hover { + border: 1px solid $cSecondaryLine; + } + + &:before { + background: $cWhite; + } + } +} + +/* SG +# Forms/Checkbox + +``` + + + +``` +*/ + +.CDB-Checkbox { + position: relative; + width: 16px; + height: 16px; + border: 1px solid $cMainLine; + border-radius: 3px; + + &:before, + &:after { + display: block; + position: absolute; + bottom: 3px; + width: 2px; + border-radius: 1px; + background: $cSecondaryLine; + content: ''; + } + + &:before { + right: 4px; + height: 8px; + transform: rotate(45deg); + } + + &:after { + left: 4px; + height: 6px; + transform: rotate(-45deg); + } + + &:checked { + border: 1px solid $cBlue; + background: $cBlue; + + &:hover { + border: 1px solid $cBlue; + } + + &:before, + &:after { + background: $cWhite; + } + } + + &:focus { + border: 1px solid $cBlue; + } + + &:hover { + border: 1px solid $cHoverLine; + } + + &:disabled { + border: 1px solid $cSecondaryLine; + background: $cThirdBackground; + + &:hover { + border: 1px solid $cSecondaryLine; + } + + &:before, + &:after { + background: $cWhite; + } + } +} + +/* SG +# Forms/Inputs + +``` + + + +``` +*/ + +.CDB-Input { + padding: 7px 8px 6px; + border: 1px solid $cMainLine; + border-radius: 3px; + font-size: $sFontSize-medium; + line-height: $sLineHeight-medium; + + &:hover { + border: 1px solid $cHoverLine; + } + &:focus { + border: 1px solid $cBlue; + } + &:disabled { + border-color: $cSecondaryLine; + background: $cThirdBackground; + } + &.has-error { + border: 1px solid rgba($cError, 0.48); + background: rgba($cError, 0.04); + color: $cError; + } +} + + +/* SG +# Forms/Sliders + +``` + +``` +*/ + +.CDB-Range { + position: relative; + width: 100%; + margin: -4px 0 0; + padding: 0; + background: transparent; + cursor: pointer; + overflow: hidden; + vertical-align: middle; +} + +.CDB-Range::-webkit-slider-thumb { + position: relative; + width: 4px; + height: 100%; + border-radius: 4px; +} + +.CDB-Range::-webkit-slider-runnable-track { + height: 4px; + margin: 8px 0; + border-radius: 4px; + background: $cMainLine; +} + +.CDB-Range::-webkit-slider-thumb:before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -3000px; + height: 4px; + border-radius: 4px; + background: $cBlue; + content: ''; +} + +.CDB-Range::-webkit-slider-thumb:after { + position: absolute; + top: -6px; + right: -6px; + bottom: -6px; + left: -6px; + width: 12px; + height: 12px; + border: 1px solid $cMainLine; + border-radius: 50%; + background: $cWhite; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); + content: ''; + z-index: 10; +} + +.CDB-Range:focus { + outline: none; +} + +.CDB-Range:hover::-webkit-slider-thumb:after, +.CDB-Range:focus::-webkit-slider-thumb:after { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.64); + cursor: pointer; +} + +.CDB-Range:disabled::-webkit-slider-thumb:before { + opacity: 0.2; +} + +.CDB-Range:disabled::-webkit-slider-thumb:after { + opacity: 0.2; +} + +/* SG +# Forms/Selects + +``` +
+ +
+ +
+
+``` +*/ + +.CDB-Select { + position: relative; +} + +.CDB-SelectItem { + position: absolute; + top: 40px; +} + diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/lists.scss new file mode 100644 index 0000000..ceaa9b8 --- /dev/null +++ b/src/scss/cdb-components/lists.scss @@ -0,0 +1,27 @@ +// Menu styles +// ---------------------------------------------- + +/* SG +# Lists/Lists Decorations + + +``` +
 
+``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-ListDecoration-Item { + border-bottom: 1px solid $cSecondaryLine; + + &:last-child { + border-bottom: 0; + } +} + +.CDB-ListDecoration-ItemLink { + display: block; + padding: 12px 16px; +} diff --git a/src/scss/components/menu.scss b/src/scss/cdb-components/menu.scss similarity index 98% rename from src/scss/components/menu.scss rename to src/scss/cdb-components/menu.scss index 880c693..c77e654 100644 --- a/src/scss/components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -16,7 +16,7 @@ ``` */ -@import '../variables/colors'; +@import '../cdb-variables/colors'; .box { width: 120px; diff --git a/src/scss/cdb-components/shapes.scss b/src/scss/cdb-components/shapes.scss index 2e3fc51..0a4d5ae 100644 --- a/src/scss/cdb-components/shapes.scss +++ b/src/scss/cdb-components/shapes.scss @@ -2,250 +2,14 @@ // ---------------------------------------------- /* SG -# Shapes/dot +# Shapes/Dot You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: ``` - - +
+
``` */ @import '../cdb-utilities/mixins'; - -.CDB-Shape-dot { - display: inline-block; - width: 8px; - min-width: 8px; - height: 8px; - border-radius: 8px; -} - -/* SG -# Shapes/threePoints - -Description - -``` -
-``` -*/ - -.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 - -``` -
-``` -*/ - -.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 - -``` -
-``` -*/ - -.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 - -``` -
-``` -*/ - -.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 - -``` -
-``` -*/ - -.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); -} diff --git a/src/scss/cdb-utilities/normalize.scss b/src/scss/cdb-utilities/normalize.scss index fd6b86d..7bd6216 100644 --- a/src/scss/cdb-utilities/normalize.scss +++ b/src/scss/cdb-utilities/normalize.scss @@ -489,6 +489,11 @@ input[type="radio"] { *width: 13px; /* 3 */ } } +input[type=range]::-webkit-slider-thumb { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; +} /** diff --git a/src/scss/components/forms.scss b/src/scss/components/forms.scss deleted file mode 100644 index 2028437..0000000 --- a/src/scss/components/forms.scss +++ /dev/null @@ -1,115 +0,0 @@ -// Menu styles -// ---------------------------------------------- - -/* SG -# Forms/Radio - - -``` - - - -``` -*/ - -@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 - -``` - - - -``` -*/ - -.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 - -``` - - - -``` -*/ - -.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; - } -} diff --git a/src/scss/utilities/reset.scss b/src/scss/utilities/reset.scss index 0c9b86d..7115f42 100644 --- a/src/scss/utilities/reset.scss +++ b/src/scss/utilities/reset.scss @@ -3,6 +3,8 @@ License: none (public domain) */ +@import '../cdb-variables/colors'; + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -58,3 +60,12 @@ button { dd, dt { display: inline-block; } + +a { + text-decoration: none; + color: $cBlue; +} + +a:hover { + text-decoration: underline; +}