From dda91b112201712d7fa2b576bedd289e62fd4023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Wed, 20 Jan 2016 17:13:54 +0100 Subject: [PATCH 01/14] first commit --- src/scss/components/forms.scss | 115 +++++++++++++++++++++++++ src/scss/components/menu.scss | 136 ++++++++++++++++++++++++++++++ src/scss/utilities/normalize.scss | 25 ++++++ src/scss/variables/_sizes.scss | 2 +- 4 files changed, 277 insertions(+), 1 deletion(-) create mode 100644 src/scss/components/forms.scss create mode 100644 src/scss/components/menu.scss diff --git a/src/scss/components/forms.scss b/src/scss/components/forms.scss new file mode 100644 index 0000000..2028437 --- /dev/null +++ b/src/scss/components/forms.scss @@ -0,0 +1,115 @@ +// 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/components/menu.scss b/src/scss/components/menu.scss new file mode 100644 index 0000000..880c693 --- /dev/null +++ b/src/scss/components/menu.scss @@ -0,0 +1,136 @@ +// Menu styles +// ---------------------------------------------- + +/* SG +# Menu/ + + +``` + +``` +*/ + +@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 + + +``` +
+
+
+
+``` +*/ + + +.Color-HoverLine { + background: $cHoverLine; +} +.Color-MainLine { + background: $cMainLine; +} +.Color-SecondaryLine { + background: $cSecondaryLine; +} + + +/* SG +# Colors/typography + + +``` +
+
+
+
+
+
+``` +*/ + + +.Color-Type02 { + background: $cTypo2; +} +.Color-Type03 { + background: $cTypo3; +} +.Color-Type04 { + background: $cTypo4; +} + + +/* SG +# Colors/other + + +``` +
+
+
+
+
+
+``` +*/ + +.Color-Higlight { + background: $cHighlight; +} +.Color-Alert { + background: $cAlert; +} +.Color-Public { + background: $cPublic; +} +.Color-Link { + background: $cLink; +} +.Color-Password { + background: $cPassword; +} +.Color-Error { + background: $cError; +} + + diff --git a/src/scss/utilities/normalize.scss b/src/scss/utilities/normalize.scss index 9375ee9..fd6b86d 100644 --- a/src/scss/utilities/normalize.scss +++ b/src/scss/utilities/normalize.scss @@ -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; + } +} diff --git a/src/scss/variables/_sizes.scss b/src/scss/variables/_sizes.scss index 70c38e5..b657ab2 100644 --- a/src/scss/variables/_sizes.scss +++ b/src/scss/variables/_sizes.scss @@ -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; 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 02/14] 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; +} From 2ae455d7dee346f8c6f579b9b8ed982f35ce852f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Fri, 22 Jan 2016 17:40:28 +0100 Subject: [PATCH 03/14] use vars --- src/scss/cdb-components/boxes.scss | 4 ++-- src/scss/cdb-components/forms.scss | 38 +++++++++++++++--------------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 3022e41..284631f 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -14,8 +14,8 @@ @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); + background: $cWhite; + box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); } diff --git a/src/scss/cdb-components/forms.scss b/src/scss/cdb-components/forms.scss index 655dae5..966b195 100644 --- a/src/scss/cdb-components/forms.scss +++ b/src/scss/cdb-components/forms.scss @@ -17,8 +17,8 @@ .CDB-Radio { position: relative; - width: 16px; - height: 16px; + width: $baseSize * 2; + height: $baseSize * 2; border: 1px solid $cMainLine; border-radius: 50%; @@ -27,8 +27,8 @@ position: absolute; top: 50%; left: 50%; - width: 6px; - height: 6px; + width: $baseSize - 2; + height: $baseSize - 2; margin-top: -3px; margin-left: -3px; border-radius: 50%; @@ -83,8 +83,8 @@ .CDB-Checkbox { position: relative; - width: 16px; - height: 16px; + width: $baseSize * 2; + height: $baseSize * 2; border: 1px solid $cMainLine; border-radius: 3px; @@ -100,14 +100,14 @@ } &:before { - right: 4px; - height: 8px; + right: $baseSize / 2; + height: $baseSize; transform: rotate(45deg); } &:after { - left: 4px; - height: 6px; + left: $baseSize / 2; + height: $baseSize - 2; transform: rotate(-45deg); } @@ -204,15 +204,15 @@ .CDB-Range::-webkit-slider-thumb { position: relative; - width: 4px; + width: $baseSize / 2; height: 100%; - border-radius: 4px; + border-radius: $baseSize / 2; } .CDB-Range::-webkit-slider-runnable-track { - height: 4px; - margin: 8px 0; - border-radius: 4px; + height: $baseSize / 2; + margin: $baseSize 0; + border-radius: $baseSize / 2; background: $cMainLine; } @@ -222,8 +222,8 @@ right: 0; bottom: 0; left: -3000px; - height: 4px; - border-radius: 4px; + height: $baseSize / 2; + border-radius: $baseSize / 2; background: $cBlue; content: ''; } @@ -234,8 +234,8 @@ right: -6px; bottom: -6px; left: -6px; - width: 12px; - height: 12px; + width: $baseSize + 4; + height: $baseSize + 4; border: 1px solid $cMainLine; border-radius: 50%; background: $cWhite; From 959c5469820428418157dba9d4647fe704938f54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Fri, 22 Jan 2016 18:01:26 +0100 Subject: [PATCH 04/14] add labels --- src/scss/cdb-components/forms.scss | 30 +++++++++++++++++++++++-- src/scss/cdb-components/typography.scss | 2 +- src/scss/cdb-utilities/helpers.scss | 3 +++ 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/scss/cdb-components/forms.scss b/src/scss/cdb-components/forms.scss index 966b195..8a5cd3d 100644 --- a/src/scss/cdb-components/forms.scss +++ b/src/scss/cdb-components/forms.scss @@ -7,8 +7,8 @@ ``` - - + + ``` */ @@ -289,3 +289,29 @@ top: 40px; } + +/* SG +# Forms/Labels + +``` + + +
+ + +``` +*/ + + diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index 3d65171..dc3d793 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -8,7 +8,7 @@

Open Sans 26/34 Regular

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

-

Open Sans 12/16 Semibold

+

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

``` diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 41eb367..cee8ce7 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -9,6 +9,9 @@ .u-tSpace-xl { margin-top: 12px; } +.u-rSpace--s { + margin-right: 2px; +} .u-rSpace { margin-right: 4px; } From b14cf93fcaf7f94f283842431c16b5404d9f1da4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Mon, 25 Jan 2016 11:44:43 +0100 Subject: [PATCH 05/14] add forms elements --- src/scss/cdb-components/forms.scss | 52 ++++++++++++++++++++++++++---- 1 file changed, 45 insertions(+), 7 deletions(-) diff --git a/src/scss/cdb-components/forms.scss b/src/scss/cdb-components/forms.scss index 8a5cd3d..db7c49f 100644 --- a/src/scss/cdb-components/forms.scss +++ b/src/scss/cdb-components/forms.scss @@ -152,13 +152,14 @@ # Forms/Inputs ``` - - - + + + ``` */ -.CDB-Input { +.CDB-InputText { + min-width: 152px; padding: 7px 8px 6px; border: 1px solid $cMainLine; border-radius: 3px; @@ -266,8 +267,8 @@ # Forms/Selects ``` -
- +
+
  • Hide
    • @@ -302,7 +303,11 @@ False -
    + +
    +
    +
    + + +
    +
    +
    + +
    +

    RADIO

    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +

    RADIO

    +
    + +
    +
    + + ``` */ +.CDB-Legend { + width: $baseSize * 12; +} From 31c75b057fc9854a2f290e0b2157c530732eb8d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Mon, 25 Jan 2016 15:12:32 +0100 Subject: [PATCH 06/14] add menu component --- src/scss/cdb-components/menu.scss | 217 ++++++++++++++++-------------- 1 file changed, 118 insertions(+), 99 deletions(-) diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index c77e654..7430fcb 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -8,129 +8,148 @@ ``` + +

    +

    + +
    + +
    + +

    +

    + ``` */ @import '../cdb-variables/colors'; -.box { - width: 120px; - height: 64px; - display: inline-block; - margin: 0 24px 24px 0; +.CDB-NavMenu { + position: relative; } -.Color-Blue { - background: $cBlue; -} -.Color-White { - background: $cWhite; - border: 1px solid #e5e5e5; -} -.Color-Dark { - background: $cBlack; +.CDB-NavMenu-Inner { + position: relative; + margin-bottom: 18px; + border-bottom: 1px solid $cMainLine; } -.Color-MainDark { - background: $cMainDark; +.CDB-NavMenu-Link { + display: block; + margin-bottom: -1px; + padding: 4px 0 11px; + border-bottom: 1px solid transparent; } -.Color-SecondaryDark { - background: $cSecondaryDark; + +.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { + border-bottom: 1px solid $cMainDark; + color: $cMainDark; } -.Color-SecondaryBackground { - background: $cSecondaryBackground; + +.CDB-NavSubmenu { + position: absolute; + right: 0; + left: 0; + padding-top: 14px; + border-bottom: 1px solid $cSecondaryLine; } -.Color-ThirdBackground { - background: $cThirdBackground; -} - - -/* SG -# Colors/line - - -``` -
    -
    -
    -
    -``` -*/ - -.Color-HoverLine { - background: $cHoverLine; +.CDB-NavSubmenu-Link { + display: block; + margin-bottom: -1px; + padding-bottom: 12px; + border-bottom: 1px solid transparent; } -.Color-MainLine { - background: $cMainLine; -} -.Color-SecondaryLine { - background: $cSecondaryLine; -} - - -/* SG -# Colors/typography - -``` -
    -
    -
    -
    -
    -
    -``` -*/ - - -.Color-Type02 { - background: $cTypo2; -} -.Color-Type03 { - background: $cTypo3; +.CDB-NavSubmenu-item.is-active { + .CDB-NavSubmenu-Link { + border-bottom: 1px solid $cTypo3; + color: $cMainDark; + } } -.Color-Type04 { - background: $cTypo4; + +.CDB-NavSubmenu-Status { + margin-left: 2px; + color: $cTypo4; } +.CDB-Navmenu.is-dark { -/* SG -# Colors/other + .CDB-NavMenu-Inner, + .CDB-NavSubmenu { + border-bottom: 1px solid $cTypo2; + } + .CDB-NavMenu-Link, + .CDB-NavSubmenu-Link { + color: $cTypo3; + } -``` -
    -
    -
    -
    -
    -
    -``` -*/ + .CDB-NavMenu-Item.is-active { + .CDB-NavMenu-Link { + border-bottom: 1px solid $cMainLine; + color: $cWhite; + } + } -.Color-Higlight { - background: $cHighlight; -} -.Color-Alert { - background: $cAlert; -} -.Color-Public { - background: $cPublic; -} -.Color-Link { - background: $cLink; -} -.Color-Password { - background: $cPassword; -} -.Color-Error { - background: $cError; + .CDB-NavSubmenu-item.is-active { + .CDB-NavSubmenu-Link { + border-bottom: 1px solid $cMainLine; + color: $cWhite; + } + } + + .CDB-NavSubmenu-Status { + color: $cTypo2; + } } From aeb83952d2a49a34ff72693b2ce2edc8a67e0260 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Mon, 25 Jan 2016 15:18:47 +0100 Subject: [PATCH 07/14] add missing shapes --- src/scss/cdb-components/shapes.scss | 241 +++++++++++++++++++++++++++- 1 file changed, 239 insertions(+), 2 deletions(-) diff --git a/src/scss/cdb-components/shapes.scss b/src/scss/cdb-components/shapes.scss index 0a4d5ae..771435e 100644 --- a/src/scss/cdb-components/shapes.scss +++ b/src/scss/cdb-components/shapes.scss @@ -7,9 +7,246 @@ 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); +} From 5472801a8fca9bd96b6597af991317a8c571c1f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Mon, 25 Jan 2016 15:53:58 +0100 Subject: [PATCH 08/14] fix hound --- src/scss/cdb-components/forms/checkbox.scss | 4 ++-- src/scss/cdb-components/forms/inputs.scss | 1 - src/scss/cdb-components/forms/radio.scss | 2 +- src/scss/cdb-components/forms/sliders.scss | 4 ++-- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index a18a0e7..fc8d913 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -33,7 +33,7 @@ } &:before { - right: $baseSize / 2; + right: $baseSize / 2; height: $baseSize; transform: rotate(45deg); } @@ -79,4 +79,4 @@ background: $cWhite; } } -} \ No newline at end of file +} diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss index deaab96..430781e 100644 --- a/src/scss/cdb-components/forms/inputs.scss +++ b/src/scss/cdb-components/forms/inputs.scss @@ -38,4 +38,3 @@ color: $cError; } } - diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 31fa5c9..9f4daf6 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -69,4 +69,4 @@ background: $cWhite; } } -} \ No newline at end of file +} diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index 974b333..e326c02 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -34,7 +34,7 @@ height: $baseSize / 2; margin: $baseSize 0; border-radius: $baseSize / 2; - background: $cMainLine; + background: $cMainLine; } .CDB-Range::-webkit-slider-thumb:before { @@ -81,4 +81,4 @@ .CDB-Range:disabled::-webkit-slider-thumb:after { opacity: 0.2; -} \ No newline at end of file +} From 37f5c9df9daf7e434e797e31f667d29801660d0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Mon, 25 Jan 2016 15:59:18 +0100 Subject: [PATCH 09/14] fix hound --- src/scss/cdb-components/boxes.scss | 2 +- src/scss/cdb-components/forms/checkbox.scss | 16 ++++++++-------- src/scss/cdb-components/forms/radio.scss | 6 +++--- src/scss/cdb-components/forms/sliders.scss | 12 ++++++------ 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 284631f..3c104b4 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -7,7 +7,7 @@ ```
     
    -``` +``` */ @import '../cdb-variables/sizes'; diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index fc8d913..a6902d4 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -21,8 +21,8 @@ border: 1px solid $cMainLine; border-radius: 3px; - &:before, - &:after { + &::before, + &::after { display: block; position: absolute; bottom: 3px; @@ -32,13 +32,13 @@ content: ''; } - &:before { + &::before { right: $baseSize / 2; height: $baseSize; transform: rotate(45deg); } - &:after { + &::after { left: $baseSize / 2; height: $baseSize - 2; transform: rotate(-45deg); @@ -52,8 +52,8 @@ border: 1px solid $cBlue; } - &:before, - &:after { + &::before, + &::after { background: $cWhite; } } @@ -74,8 +74,8 @@ border: 1px solid $cSecondaryLine; } - &:before, - &:after { + &::before, + &::after { background: $cWhite; } } diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 9f4daf6..1655323 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -22,7 +22,7 @@ border: 1px solid $cMainLine; border-radius: 50%; - &:before { + &::before { display: block; position: absolute; top: 50%; @@ -44,7 +44,7 @@ border: 1px solid $cBlue; } - &:before { + &::before { background: $cWhite; } } @@ -65,7 +65,7 @@ border: 1px solid $cSecondaryLine; } - &:before { + &::before { background: $cWhite; } } diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index e326c02..23461e9 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -37,7 +37,7 @@ background: $cMainLine; } -.CDB-Range::-webkit-slider-thumb:before { +.CDB-Range::-webkit-slider-thumb::before { position: absolute; top: 0; right: 0; @@ -49,7 +49,7 @@ content: ''; } -.CDB-Range::-webkit-slider-thumb:after { +.CDB-Range::-webkit-slider-thumb::after { position: absolute; top: -6px; right: -6px; @@ -69,16 +69,16 @@ outline: none; } -.CDB-Range:hover::-webkit-slider-thumb:after, -.CDB-Range:focus::-webkit-slider-thumb:after { +.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 { +.CDB-Range:disabled::-webkit-slider-thumb::before { opacity: 0.2; } -.CDB-Range:disabled::-webkit-slider-thumb:after { +.CDB-Range:disabled::-webkit-slider-thumb::after { opacity: 0.2; } From f0313766b3236877b4cdb2b56aea777168635ef2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Garc=C3=ADa?= Date: Mon, 25 Jan 2016 23:51:01 +0100 Subject: [PATCH 10/14] clean html --- package.json | 2 +- src/scss/cdb-components/menu.scss | 39 ++++++++++++++++++------------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 3c981c4..984518b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cartoassets", "description": "Share frontend assets between different CartoDB repositories", - "version": "0.1.20", + "version": "0.1.21", "homepage": "https://github.com/cartodb/CartoAssets", "author": { "name": "CartoDB", diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index cb74b30..cc725f9 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -7,25 +7,25 @@ ```