diff --git a/.scss-lint.yml b/.scss-lint.yml index bc7a7fe..ce2a8fc 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -3,6 +3,7 @@ exclude: - 'src/scss/cdb-utilities/normalize.scss' - 'src/scss/cdb-utilities/reset.scss' - 'src/scss/cdb-utilities/helpers.scss' + - 'src/scss/utilities/reset.scss' - 'src/scss/variables/_sizes.scss' linters: BangFormat: diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 62246ce..dfafb57 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 9fd7e01..76369cd 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 4340d08..b031c21 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss new file mode 100644 index 0000000..3c104b4 --- /dev/null +++ b/src/scss/cdb-components/boxes.scss @@ -0,0 +1,21 @@ +// Menu styles +// ---------------------------------------------- + +/* SG +# Boxes/Box Dropdown + + +``` +
 
+``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Box-Modal { + border: 1px solid $cMainLine; + border-radius: 4px; + background: $cWhite; + box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); +} diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss new file mode 100644 index 0000000..a6902d4 --- /dev/null +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -0,0 +1,82 @@ +// CheckBoxes styles +// ---------------------------------------------- + +/* SG +# Forms/Checkbox + +``` + + + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-Checkbox { + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; + 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: $baseSize / 2; + height: $baseSize; + transform: rotate(45deg); + } + + &::after { + left: $baseSize / 2; + height: $baseSize - 2; + 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; + } + } +} diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss new file mode 100644 index 0000000..430781e --- /dev/null +++ b/src/scss/cdb-components/forms/inputs.scss @@ -0,0 +1,40 @@ +// Input styles +// ---------------------------------------------- + +/* SG +# Forms/Inputs + +``` + + + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-InputText { + min-width: 152px; + 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; + } +} diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss new file mode 100644 index 0000000..090bc16 --- /dev/null +++ b/src/scss/cdb-components/forms/legends.scss @@ -0,0 +1,65 @@ +// Legends styles +// ---------------------------------------------- + +/* SG +# Forms/Labels + +``` + + + +
+
+
+ + + + +
+
+
+ +
+

RADIO

+ +
+
+

RADIO

+
+ +
+
+ +``` +*/ + +@import '../../cdb-variables/sizes'; + +.CDB-Legend { + width: $baseSize * 12; +} diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss new file mode 100644 index 0000000..db729c4 --- /dev/null +++ b/src/scss/cdb-components/forms/radio.scss @@ -0,0 +1,72 @@ +// Radio Button styles +// ---------------------------------------------- + +/* SG +# Forms/Radio + + +``` + + + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-Radio { + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; + border: 1px solid $cMainLine; + border-radius: 50%; + + &::before { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: $baseSize - 2; + height: $baseSize - 2; + 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; + } + } +} diff --git a/src/scss/cdb-components/forms/selects.scss b/src/scss/cdb-components/forms/selects.scss new file mode 100644 index 0000000..dee2267 --- /dev/null +++ b/src/scss/cdb-components/forms/selects.scss @@ -0,0 +1,30 @@ +// Select styles +// ---------------------------------------------- + + +/* SG +# Forms/Selects + +``` +
+ +
+ +
+
+``` +*/ + +.CDB-Select { + position: relative; +} + +.CDB-SelectItem { + position: absolute; + top: 40px; +} diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss new file mode 100644 index 0000000..fbae886 --- /dev/null +++ b/src/scss/cdb-components/forms/sliders.scss @@ -0,0 +1,81 @@ +// Sliders styles +// ---------------------------------------------- + +/* SG +# Forms/Sliders + +``` + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.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: $baseSize / 2; + height: 100%; + border-radius: $baseSize / 2; +} + +.CDB-Range::-webkit-slider-runnable-track { + height: $baseSize / 4; + margin: $baseSize 0; + border-radius: $baseSize / 2; + background: $cMainLine; +} + +.CDB-Range::-webkit-slider-thumb::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -3000px; + height: $baseSize / 4; + border-radius: $baseSize / 2; + background: $cBlue; + content: ''; +} + +.CDB-Range::-webkit-slider-thumb::after { + position: absolute; + top: -6px; + right: -6px; + left: -6px; + width: $baseSize + 4; + height: $baseSize + 4; + border: 1px solid $cBlue; + border-radius: 50%; + background: $cWhite; + content: ''; + z-index: 10; +} + +.CDB-Range:focus { + outline: none; +} + +.CDB-Range:hover::-webkit-slider-thumb::after, +.CDB-Range:focus::-webkit-slider-thumb::after { + cursor: pointer; +} + +.CDB-Range:disabled::-webkit-slider-thumb::before { + opacity: 0.2; +} + +.CDB-Range:disabled::-webkit-slider-thumb::after { + opacity: 0.2; +} diff --git a/src/scss/cdb-components/forms/toogle.scss b/src/scss/cdb-components/forms/toogle.scss new file mode 100644 index 0000000..58933e3 --- /dev/null +++ b/src/scss/cdb-components/forms/toogle.scss @@ -0,0 +1,50 @@ +// Radio Button styles +// ---------------------------------------------- + +/* SG +# Forms/Toogle + + +``` + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + +.CDB-Toogle { + @include transition(background, 300ms); + position: relative; + width: $baseSize * 4; + height: $baseSize * 2; + margin: 0 2px; + border-radius: 50px; + background: $cTypo4; +} + +.CDB-Toogle:before { + position: absolute; + top: 2px; + left: 2px; + width: $baseSize + 4; + height: $baseSize + 4; + border-radius: 50%; + background: $cWhite; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); + content: ''; +} + +.CDB-Toogle:checked { + background: $cMainDark; +} + +.CDB-Toogle:checked:before { + right: 2px; + left: auto; +} diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/lists.scss new file mode 100644 index 0000000..d85ff29 --- /dev/null +++ b/src/scss/cdb-components/lists.scss @@ -0,0 +1,27 @@ +// List 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/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss new file mode 100644 index 0000000..cc725f9 --- /dev/null +++ b/src/scss/cdb-components/menu.scss @@ -0,0 +1,162 @@ +// Menu styles +// ---------------------------------------------- + +/* SG +# Menu/ + + +``` + + +

+

+ +
+ +
+ +

+

+ +``` +*/ + +@import '../cdb-variables/colors'; + +.CDB-NavMenu { + position: relative; +} + +.CDB-NavMenu-Inner { + position: relative; + margin-bottom: 18px; + border-bottom: 1px solid $cMainLine; +} + +.CDB-NavMenu-Link { + display: block; + margin-bottom: -1px; + padding: 4px 0 11px; + border-bottom: 1px solid transparent; +} + +.CDB-NavMenu-Item, +.CDB-NavSubmenu-Item { + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} + +.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { + border-bottom: 1px solid $cMainDark; + color: $cMainDark; +} + +.CDB-NavSubmenu { + position: absolute; + right: 0; + left: 0; + padding-top: 14px; + border-bottom: 1px solid $cSecondaryLine; +} + +.CDB-NavSubmenu-Link { + display: block; + margin-bottom: -1px; + padding-bottom: 12px; + border-bottom: 1px solid transparent; +} + +.CDB-NavSubmenu-item.is-active { + .CDB-NavSubmenu-Link { + border-bottom: 1px solid $cTypo3; + color: $cMainDark; + } +} + +.CDB-NavSubmenu-Status { + margin-left: 2px; + color: $cTypo4; +} + +.CDB-Navmenu.is-dark { + + .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; + } + } + + .CDB-NavSubmenu-item.is-active { + .CDB-NavSubmenu-Link { + border-bottom: 1px solid $cMainLine; + color: $cWhite; + } + } + + .CDB-NavSubmenu-Status { + color: $cTypo2; + } +} + + diff --git a/src/scss/cdb-components/shapes.scss b/src/scss/cdb-components/shapes.scss index 2e3fc51..6b29308 100644 --- a/src/scss/cdb-components/shapes.scss +++ b/src/scss/cdb-components/shapes.scss @@ -1,8 +1,8 @@ -// Shapes styles +// Shape styles // ---------------------------------------------- /* SG -# Shapes/dot +# Shapes/Dot You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: @@ -14,6 +14,7 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava @import '../cdb-utilities/mixins'; + .CDB-Shape-dot { display: inline-block; width: 8px; 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; } diff --git a/src/scss/cdb-utilities/normalize.scss b/src/scss/cdb-utilities/normalize.scss index 9375ee9..7bd6216 100644 --- a/src/scss/cdb-utilities/normalize.scss +++ b/src/scss/cdb-utilities/normalize.scss @@ -477,13 +477,24 @@ 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 */ } } +input[type=range]::-webkit-slider-thumb { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; +} + /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain @@ -576,3 +587,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/cdb-variables/_sizes.scss b/src/scss/cdb-variables/_sizes.scss index 70c38e5..b657ab2 100644 --- a/src/scss/cdb-variables/_sizes.scss +++ b/src/scss/cdb-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; 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; +}