-
+
-
+
+
+ -
+
+
+
-
+
+
+
- + + +
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
+.CDB-Button {
+ @include transition(background, 300ms);
+ padding: $baseSize + 1 $baseSize + 12;
+ border: 1px solid transparent;
+ border-radius: $baseSize / 2;
+ cursor: pointer;
+ box-sizing: border-box;
+
+ .CDB-Button-Text {
+ display: block;
+ }
+ &.is-disabled {
+ cursor: default;
+ opacity: 0.24;
+ }
+}
+
+.CDB-Button--small {
+ padding: $baseSize / 2 $baseSize + 4;
+}
+
+.CDB-Button--big {
+ padding: $baseSize + 4 $baseSize + 12;
+}
+
+.CDB-Button--icon {
+ padding: 7px 9px;
+}
+
+.CDB-Button--primary {
+ background: $cBlue;
+ color: $cWhite;
+
+ &:hover {
+ background: darken($cBlue, 8%);
+ }
+ &:active {
+ background: darken($cBlue, 16%);
+ }
+
+ &.is-disabled {
+ &:hover {
+ background: $cBlue;
+ }
+ &:active {
+ background: $cBlue;
+ }
+ }
+}
+
+.CDB-Button--alert {
+ background: $cAlert;
+ color: $cWhite;
+
+ &:hover {
+ background: darken($cAlert, 8%);
+ }
+ &:active {
+ background: darken($cAlert, 16%);
+ }
+
+ &.is-disabled {
+ &:hover {
+ background: $cAlert;
+ }
+ &:active {
+ background: $cAlert;
+ }
+ }
+}
+
+
+.CDB-Button--error,
+.CDB-Button--negative {
+ background: $cError;
+ color: $cWhite;
+
+ &:hover {
+ background: darken($cError, 8%);
+ }
+ &:active {
+ background: darken($cError, 16%);
+ }
+
+ &.is-disabled {
+ &:hover {
+ background: $cError;
+ }
+ &:active {
+ background: $cError;
+ }
+ }
+}
+
+
+
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Secondary
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+
+.CDB-Button--secondary {
+ border: 1px solid $cBlue;
+ color: $cBlue;
+
+ &:hover {
+ background: rgba($cBlue, 0.08);
+ }
+ &:active {
+ background: $cBlue;
+ color: $cWhite;
+ }
+
+ &.is-disabled {
+ &:hover {
+ background: transparent;
+ }
+ &:active {
+ background: transparent;
+ }
+ }
+}
+
+
+.CDB-Button--white {
+ border: 1px solid $cWhite;
+ color: $cWhite;
+
+ &:hover {
+ background: rgba($cWhite, 0.08);
+ }
+ &:active {
+ background: rgba($cMainBg, 0.08);
+ color: $cWhite;
+ }
+
+ &.is-disabled {
+ @include opacity(0.24);
+ &:hover {
+ background: transparent;
+ }
+ &:active {
+ background: transparent;
+ color: $cWhite;
+ }
+ }
+}
diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss
new file mode 100644
index 0000000..87fb7b7
--- /dev/null
+++ b/src/scss/cdb-components/colors.scss
@@ -0,0 +1,129 @@
+// Colors styles
+// ----------------------------------------------
+
+/* SG
+# Colors/structure
+
+
+```
+
+
+
+
+
+
+```
+*/
+
+@import '../cdb-variables/colors';
+
+
+.Color-Blue {
+ background: $cBlue;
+}
+.Color-White {
+ border: 1px solid #E5E5E5;
+ background: $cWhite;
+}
+.Color-Dark {
+ background: $cBlack;
+}
+
+.Color-MainDark {
+ background: $cMainBg;
+}
+.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: $cSecondaryText;
+}
+.Color-Type03 {
+ background: $cAltText;
+}
+.Color-Type04 {
+ background: $cHintText;
+}
+
+
+/* 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/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss
new file mode 100644
index 0000000..8774a75
--- /dev/null
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -0,0 +1,103 @@
+// CheckBoxes styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Checkbox
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+
+.CDB-Checkbox {
+ position: absolute;
+ width: $baseSize * 2;
+ height: $baseSize * 2;
+ opacity: 0;
+ vertical-align: middle;
+ z-index: 1;
+}
+
+.CDB-Checkbox-face {
+ position: relative;
+ width: $baseSize * 2;
+ height: $baseSize * 2;
+ border: 1px solid $cMainLine;
+ border-radius: 3px;
+ background: $cWhite;
+ cursor: pointer;
+ box-sizing: border-box;
+
+ &::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);
+ }
+}
+
+.CDB-Checkbox:checked + .CDB-Checkbox-face {
+ @include transition(background, 300ms);
+ border: 1px solid $cBlue;
+ background: $cBlue;
+
+ &::before,
+ &::after {
+ background: $cWhite;
+ }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+ border: 1px solid $cSecondaryLine;
+ background: $cThirdBackground;
+
+ &::before,
+ &::after {
+ background: $cWhite;
+ }
+}
+
+.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
+ border: 1px solid $cSecondaryLine;
+}
+
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
+.CDB-Checkbox:focus + .CDB-Checkbox-face {
+ border: 1px solid $cBlue;
+}
+
+.CDB-Checkbox:hover + .CDB-Checkbox-face {
+ border: 1px solid $cHoverLine;
+}
diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss
new file mode 100644
index 0000000..5258392
--- /dev/null
+++ b/src/scss/cdb-components/forms/dropdowns.scss
@@ -0,0 +1,174 @@
+// Dropdown styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Dropdowns
+
+```
+
+
+
+
+
+
+
+-
+
- + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+.CDB-DropdownContainer {
+ position: relative;
+ height: 250px;
+}
+.CDB-Dropdown {
+ @include display-flex();
+ @include flex-direction(row);
+ position: absolute;
+ top: 40px;
+ max-height: 200px;
+}
+.CDB-Dropdown-calculations {
+ padding: $sMargin-element;
+ border-right: 1px solid $cMainLine;
+ border-radius: 4px 0 0 4px;
+ background-color: $cSecondaryBackground;
+ box-sizing: border-box;
+}
+.CDB-Dropdown-calculationsElement {
+ margin-bottom: $sLineHeight-medium;
+ color: $cMainBg;
+ font-size: $sFontSize-small;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+.CDB-Dropdown-options {
+ width: $baseSize * 20;
+ border-radius: 0 4px 4px 0;
+ background-color: $cWhite;
+ vertical-align: top;
+}
+.CDB-Dropdown-optionsElement {
+ @include text-overflow();
+ padding: 12px 10px;
+ border-bottom: 1px solid $cMainLine;
+ color: $cBlue;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ &:hover {
+ background-color: rgba(157, 224, 173, 0.2);
+ color: $cMainBg;
+ cursor: pointer;
+ }
+}
+.CDB-Dropdown-optionsElement.is-selected {
+ color: $cMainBg;
+}
+.CDB-Dropdown-optionsElement.is-disabled {
+ color: $cHintText;
+
+ &:hover {
+ background-color: transparent;
+ cursor: default;
+ }
+}
diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss
new file mode 100644
index 0000000..a7a8e01
--- /dev/null
+++ b/src/scss/cdb-components/forms/inputs.scss
@@ -0,0 +1,61 @@
+// Input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Inputs
+
+```
+
+
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
+.CDB-InputText {
+ width: 100%;
+ padding: 7px 8px;
+ border: 1px solid $cMainLine;
+ border-radius: $baseSize / 2;
+ font-size: $sFontSize-medium;
+ line-height: $sLineHeight-medium;
+ box-sizing: border-box;
+
+ &.is-cursor {
+ cursor: pointer;
+ }
+ &.is-empty {
+ color: $cHintText;
+ }
+ &:hover {
+ border: 1px solid $cHoverLine;
+ }
+ &:focus {
+ border: 1px solid $cBlue;
+ outline: none;
+ }
+ &:disabled,
+ &.is-disabled {
+ border-color: $cSecondaryLine;
+ background: $cThirdBackground;
+ cursor: default;
+ }
+ &.has-error {
+ @include default-form-error-style();
+ }
+}
+.CDB-InputTextPlain {
+ width: 100%;
+ border: 0;
+ background: transparent;
+ font-size: $sFontSize-medium;
+ line-height: $sLineHeight-medium;
+ box-sizing: border-box;
+}
+
+.CDB-FieldError .CDB-InputText {
+ @include default-form-error-style();
+}
diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss
new file mode 100644
index 0000000..34259cb
--- /dev/null
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -0,0 +1,104 @@
+// Legends styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Labels
+
+```
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+ +
+
+
+
+
+
+
++
+
+ +
+
+RADIO
+-
+
-
+ + + + ++
+
- + + +
+
+
+RADIO
+ ++
+
+ +
+
+
++ + + +
+ +
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-utilities/mixins';
+
+.CDB-Legend {
+ width: $baseSize * 12;
+}
+
+.CDB-Legend--big {
+ width: ($baseSize * 24);
+}
+
+.CDB-Fieldset {
+ @include display-flex();
+ @include align-items(center);
+}
+.CDB-Fieldset-block {
+ width: 100%;
+}
+
diff --git a/src/scss/cdb-components/forms/option-input.scss b/src/scss/cdb-components/forms/option-input.scss
new file mode 100644
index 0000000..721032d
--- /dev/null
+++ b/src/scss/cdb-components/forms/option-input.scss
@@ -0,0 +1,152 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Option input
+
+```
++ + + +
+ +
+
+
+-
+
- + + + +
- + + + +
- + + +
+ +
+
+
+-
+
- + + + +
- + + +
+ + + +
+
+ + + +
+
+ + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + +.CDB-OptionInput { + width: 100%; + height: $baseSize * 4; + border: 1px solid $cMainLine; + border-radius: $baseSize / 2; + box-sizing: border-box; + vertical-align: middle; + + &:hover { + border: 1px solid $cHoverLine; + } + &:focus { + border: 1px solid $cBlue; + } +} +.CDB-OptionInput.is-active { + border: 1px solid $cBlue; +} +.CDB-OptionInput-container { + @include display-flex(); + @include align-content(center); + @include align-items(center); + margin: 0 $baseSize; +} +.CDB-OptionInput-container--noMargin { + margin: 0; +} +.CDB-OptionInput-item { + @include display-flex(); + @include align-items(center); + @include align-content(center); + width: auto; + height: 100%; + font-size: $sFontSize-medium; + box-sizing: content-box; + + &::after { + padding: 0 $baseSize - 2; + color: $cHintText; + content: '·'; + } + &:last-child { + width: 100%; + + &::after { + display: none; + } + } +} +.CDB-OptionInput-item--noSeparator::after { + content: ''; +} +.CDB-OptionInput-content { + @include display-flex(); + @include align-items(center); + height: 100%; + color: $cMainBg; + box-sizing: content-box; + white-space: nowrap; + + &:hover { + text-decoration: none; + } +} +.CDB-OptionInput-item.is-active > .CDB-OptionInput-content { + border-bottom: 1px solid $cMainBg; +} diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss new file mode 100644 index 0000000..badfed2 --- /dev/null +++ b/src/scss/cdb-components/forms/radio.scss @@ -0,0 +1,93 @@ + +// Radios styles +// ---------------------------------------------- + +/* SG +# Forms/Radio + +``` +
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+
+.CDB-Radio {
+ position: absolute;
+ width: $baseSize * 2;
+ height: $baseSize * 2;
+ opacity: 0;
+ vertical-align: middle;
+ z-index: 1;
+}
+
+.CDB-Radio-face {
+ position: relative;
+ width: $baseSize * 2;
+ height: $baseSize * 2;
+ border: 1px solid $cMainLine;
+ border-radius: 50%;
+ background: $cWhite;
+ text-indent: 20px;
+ cursor: pointer;
+ box-sizing: border-box;
+
+ &::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: $baseSize - 2;
+ height: $baseSize - 2;
+ margin-top: -3px;
+ margin-left: -3px;
+ border-radius: 50%;
+ background: $cSecondaryLine;
+ content: '';
+ }
+}
+
+.CDB-Radio:checked + .CDB-Radio-face {
+ @include transition(background, 300ms);
+ border: 1px solid $cBlue;
+ background: $cBlue;
+
+ &::before {
+ background: $cWhite;
+ }
+}
+
+.CDB-Radio:disabled + .CDB-Radio-face {
+ border: 1px solid $cSecondaryLine;
+ background: $cThirdBackground;
+
+ &::before {
+ background: $cWhite;
+ }
+}
+
+.CDB-Radio:disabled:hover + .CDB-Radio-face {
+ border: 1px solid $cSecondaryLine;
+}
+
+.CDB-Radio:hover + .CDB-Radio-face {
+ border: 1px solid $cHoverLine;
+}
+
+.CDB-Radio:focus + .CDB-Radio-face,
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+ border: 1px solid $cBlue;
+}
diff --git a/src/scss/cdb-components/forms/selects.scss b/src/scss/cdb-components/forms/selects.scss
new file mode 100644
index 0000000..08b1d35
--- /dev/null
+++ b/src/scss/cdb-components/forms/selects.scss
@@ -0,0 +1,98 @@
+// Select styles
+// ----------------------------------------------
+
+
+/* SG
+# Forms/Selects
+
+```
+
+
+
+
+
+
+-
+
- Hide +
- Rename +
- Change source dataset… +
- Delete this layer… +
+
+
+ + +
+
+
+DejaVu Sans
+
+
+-
+
- Hide +
- Rename +
- Change source dataset… +
- Delete this layer… +
DejaVu Sans
++
DejaVu Sans
++ + + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/helpers'; + +.CDB-Select { + position: relative; +} + +.CDB-SelectItem { + position: absolute; + top: 40px; +} + +.CDB-SelectFake { + -webkit-appearance: none; + appearance: none; + width: 100%; + padding: 7px 8px 6px; + border: 1px solid $cMainLine; + border-radius: $baseSize / 2; + background: $cWhite; + font-size: $sFontSize-medium; + line-height: $sLineHeight-medium; + box-sizing: border-box; + + &:hover { + border: 1px solid $cHoverLine; + } + &:focus { + border: 1px solid $cBlue; + outline: none; + } + &:disabled { + border-color: $cSecondaryLine; + background: $cThirdBackground; + } + &.has-error { + @include default-form-error-style(); + } +} + +.CDB-FieldError .CDB-Select, +.CDB-FieldError .CDB-SelectFake { + @include default-form-error-style(); +} diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss new file mode 100644 index 0000000..9b76b2b --- /dev/null +++ b/src/scss/cdb-components/forms/sliders.scss @@ -0,0 +1,143 @@ +// Sliders styles +// ---------------------------------------------- + +/* SG +# Forms/Sliders + +``` + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-Range { + -webkit-appearance: none; + -moz-appearance: none; + position: relative; + width: 100%; + margin: -4px 0 0; + padding: 0 6px; + border: 0; + background: transparent; + cursor: pointer; + overflow: hidden; + vertical-align: middle; + + &:focus { + outline: 0; + } +} + +.CDB-Range::-webkit-slider-runnable-track { + height: $baseSize / 4; + margin: $baseSize 0; + border-radius: $baseSize / 2; + background: $cMainLine; +} + +.CDB-Range::-webkit-slider-thumb { + position: relative; + width: $baseSize / 2; + height: 100%; + border-radius: $baseSize / 2; + + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -3000px; + height: $baseSize / 4; + border-radius: $baseSize / 2; + background: $cBlue; + content: ''; + } + + &::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: 1; + } + + &:focus, + &:hover { + &::after { + cursor: pointer; + } + } + + &:disabled { + &::before, + &::after { + opacity: 0.2; + } + } +} + +.CDB-Range::-moz-range-track { + height: $baseSize / 4; + margin: $baseSize 0; + border: 0; + border-radius: $baseSize / 2; + outline: none; + background: $cMainLine; +} + +.CDB-Range::-moz-range-thumb { + 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: 1; +} + +.CDB-Range::-moz-range-progress { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -3000px; + height: $baseSize / 4; + border-radius: $baseSize / 2; + background: $cBlue; + content: ''; +} + +.CDB-Range::-ms-track { + height: $baseSize / 4; + margin: $baseSize 0; + border: transparent; + border-radius: $baseSize / 2; + background: $cMainLine; + color: transparent; +} + +.CDB-Range::-ms-thumb { + 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: 1; +} diff --git a/src/scss/cdb-components/forms/tabsForms.scss b/src/scss/cdb-components/forms/tabsForms.scss new file mode 100644 index 0000000..d0b5f34 --- /dev/null +++ b/src/scss/cdb-components/forms/tabsForms.scss @@ -0,0 +1,101 @@ +// Tabs Forms styles +// ---------------------------------------------- + +/* SG +# Forms/TabsForms + +``` +
+
+```
+*/
+
+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+
+.CDB-TabsForms {
+ border: 1px solid $cMainLine;
+ border-radius: 4px;
+}
+.CDB-TabsForms-inner {
+ @include display-flex();
+}
+.CDB-TabsForms-item {
+ border-left: 1px solid $cSecondaryLine;
+}
+.CDB-TabsForms-item:first-child {
+ border-left: 0;
+}
+.CDB-TabsForms-button {
+ padding: 7px 8px;
+}
+
+
+
+
+
+
diff --git a/src/scss/cdb-components/forms/textarea.scss b/src/scss/cdb-components/forms/textarea.scss
new file mode 100644
index 0000000..d37bb2c
--- /dev/null
+++ b/src/scss/cdb-components/forms/textarea.scss
@@ -0,0 +1,46 @@
+// Textarea styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Textareas
+
+```
+
+
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
+.CDB-Textarea {
+ width: 100%;
+ padding: 7px 8px 6px;
+ border: 1px solid $cMainLine;
+ border-radius: $baseSize / 2;
+ font-size: $sFontSize-medium;
+ line-height: $sLineHeight-medium;
+ box-sizing: border-box;
+
+ &:hover {
+ border: 1px solid $cHoverLine;
+ }
+ &:focus {
+ border: 1px solid $cBlue;
+ outline-color: transparent;
+ outline-style: none;
+ }
+ &:disabled {
+ border-color: $cSecondaryLine;
+ background: $cThirdBackground;
+ }
+ &:has-error {
+ @include default-form-error-style();
+ }
+}
+.CDB-FieldError .CDB-Textarea,
+.CDB-Textarea.has-error {
+ @include default-form-error-style();
+}
diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss
new file mode 100644
index 0000000..c41ac45
--- /dev/null
+++ b/src/scss/cdb-components/forms/toggle.scss
@@ -0,0 +1,76 @@
+// Radio Button styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Toggle
+
+
+```
+-
+
- + + +
- + + +
- + + +
+
+
+
+
+
+
+
+
++ +
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-Toggle {
+ position: absolute;
+ width: $baseSize * 4;
+ height: $baseSize * 2;
+ opacity: 0;
+ z-index: 1;
+
+ + .CDB-ToggleFace {
+ @include transition(background, 300ms);
+ position: relative;
+ width: $baseSize * 4;
+ height: $baseSize * 2;
+ margin: 0 2px;
+ border-radius: 50px;
+ background: $cHintText;
+
+ &::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: '';
+ }
+ }
+
+ &:checked + .CDB-ToggleFace {
+ background: $cHighlight;
+
+ &::before {
+ right: 2px;
+ left: auto;
+ }
+ }
+}
+
+.Toggle .is-disabled {
+ opacity: 0.24;
+}
diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss
new file mode 100644
index 0000000..497bcd7
--- /dev/null
+++ b/src/scss/cdb-components/headers.scss
@@ -0,0 +1,226 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Headers
+
+```
+
+
+
+
+
+
+
+
+
+
+
+ Name Map
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + + +
-
+
-
+
-
+
+
+
-
+
+
+
-
+
+
+
- + + +
+ -
+
-
+
Published 8 days ago
+
+
+
+
+ +
+
+
+
+
+
+
+
+ Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected
+-
+
- + + +
-
+
+ ++ ++ + + ++
+
+
+
+ -
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ Basemap
+
+
+
+
+
+
+
+
+
+
+
+ Positron by CartoDB
++
+
+ +
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+ +
+
+
+1
+
+
++
+
+``` +*/ + +@import '../cdb-utilities/mixins'; +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-HeaderInfo { + @include display-flex(); + @include align-items(flex-start); + + &.is-block { + display: block; + } +} +.CDB-HeaderInfo-listItem { + display: inline-block; + margin-right: 8px; + vertical-align: middle; + + &:last-child { + margin-right: 0; + } +} + +.CDB-HeaderInfo-inner { + @include flex(1); +} +.CDB-HeaderInfo-back { + margin-top: 7px; +} +.CDB-HeaderInfo-title { + @include display-flex(); + @include align-items(center); +} +.CDB-HeaderInfo-titleText { + @include flex(1); + width: 0; + padding-right: 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.CDB-HeaderInfo-actionsItem { + display: inline-block; + margin-left: 4px; + vertical-align: middle; +} +.CDB-HeaderNumeration { + width: $baseSize * 3; + min-width: $baseSize * 3; + height: $baseSize * 3; + border: 1px solid $cMainLine; + border-radius: 4px; + background-color: $cWhite; + color: $cAltText; + font-size: $sFontSize-small; + line-height: 23px; + text-align: center; + box-sizing: border-box; +} diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/lists.scss new file mode 100644 index 0000000..57b2a9c --- /dev/null +++ b/src/scss/cdb-components/lists.scss @@ -0,0 +1,39 @@ +// List styles +// ---------------------------------------------- + +/* SG +# Lists/Lists Decorations + + +``` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+.CDB-LoaderIcon-spinner {
+ animation: rotate 2s linear infinite;
+ width: 16px;
+ height: 16px;
+}
+
+.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
+ width: 14px;
+ height: 14px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
+ width: 40px;
+ height: 40px;
+}
+
+.CDB-LoaderIcon-path {
+ stroke: rgba(255, 255, 255, 0.88);
+ stroke-linecap: round;
+ animation: dash 1.5s ease-in-out infinite;
+ stroke-width: 4px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
+ stroke-width: 2px;
+}
+
+.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
+ stroke: rgba(0, 0, 0, 0.24);
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss
new file mode 100644
index 0000000..4e6787d
--- /dev/null
+++ b/src/scss/cdb-components/menu.scss
@@ -0,0 +1,232 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Menu/Navigation
+
+
+```
+
+
+
+
+
+
+
+
++
+ +
+
+
+
++
+ + + + +
+
+ +
+
+
+
+```
+*/
+
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
+.CDB-NavMenu {
+ position: relative;
+ z-index: 2;
+}
+
+.CDB-NavMenu-inner {
+ position: relative;
+ margin-bottom: 18px;
+ border-bottom: 1px solid $cMainLine;
+}
+.CDB-NavMenu-inner--no-margin {
+ margin-bottom: 0;
+}
+.CDB-NavMenu-inner--is-dropdown {
+ padding: $baseSize 0 0 $baseSize * 2;
+}
+
+.CDB-NavMenu-link {
+ display: block;
+ margin-bottom: -1px;
+ padding: 4px 0 11px;
+ border-bottom: 1px solid transparent;
+ color: $cBlue;
+}
+
+.CDB-NavMenu-item,
+.CDB-NavSubmenu-item {
+ display: inline-block;
+ margin-right: 12px;
+ vertical-align: middle;
+}
+
+.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+ border-bottom: 1px solid $cBlack;
+ color: $cMainText;
+}
+
+.CDB-NavSubmenu {
+ border-bottom: 1px solid $cSecondaryLine;
+}
+
+.CDB-NavSubmenu--inside {
+ position: absolute;
+ right: 0;
+ left: 0;
+ padding-top: 14px;
+}
+
+.CDB-NavSubmenu--outside {
+ margin-top: -5px;
+ margin-bottom: 18px;
+}
+
+.CDB-NavSubmenu-link {
+ display: block;
+ margin-bottom: -1px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid transparent;
+ color: $cBlue;
+}
+
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+ border-bottom: 1px solid $cMainLine;
+ color: $cMainText;
+}
+
+.CDB-NavSubmenu-status {
+ margin-left: 2px;
+}
+
+.CDB-NavMenu.is-dark {
+
+ .CDB-NavMenu-inner,
+ .CDB-NavSubmenu {
+ border-bottom: 1px solid $cSecondaryText;
+ }
+
+ .CDB-NavMenu-link,
+ .CDB-NavSubmenu-link {
+ color: $cAltText;
+ }
+
+ .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+ border-bottom: 1px solid $cMainLine;
+ color: $cWhite;
+ }
+
+ .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+ border-bottom: 1px solid $cMainLine;
+ color: $cWhite;
+ }
+
+ .CDB-NavSubmenu-status {
+ color: $cSecondaryText;
+ }
+}
+
+
+
diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss
new file mode 100644
index 0000000..6fa4b2b
--- /dev/null
+++ b/src/scss/cdb-components/shapes/add.scss
@@ -0,0 +1,131 @@
+/* SG
+# Shapes/Add
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape {
+ width: 16px;
+ height: 16px;
+ text-align: center;
+}
+.CDB-Shape--medium {
+ width: 24px;
+ height: 24px;
+}
+.CDB-Shape:hover {
+ cursor: pointer;
+}
+
+
+.CDB-Shape-add {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ right: 1px;
+ bottom: 7px;
+ left: 0;
+ height: 1px;
+ background: $cMainBg;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 1;
+ bottom: 0;
+ left: 7px;
+ width: 1px;
+ background: $cMainBg;
+ content: '';
+ }
+}
+
+.CDB-Shape-add.is-small {
+
+ &::before {
+ display: block;
+ position: absolute;
+ right: 3px;
+ bottom: 7px;
+ left: 4px;
+ height: 1px;
+ background: $cMainBg;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 4px;
+ bottom: 3px;
+ left: 8px;
+ width: 1px;
+ background: $cMainBg;
+ content: '';
+ }
+}
+
+
+
+.CDB-Shape-add.is-blue {
+ &::before,
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-add.is-white {
+ &::before,
+ &::after {
+ background: $cWhite;
+ }
+}
+
+
+
diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss
new file mode 100644
index 0000000..295cd40
--- /dev/null
+++ b/src/scss/cdb-components/shapes/arrow.scss
@@ -0,0 +1,85 @@
+/* SG
+# Shapes/Arrow
+
+Description
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-Arrow {
+ position: relative;
+ width: 1px;
+ height: 8px;
+ background: $cMainBg;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 5px;
+ height: 1px;
+ transform: rotate(45deg);
+ background: $cMainBg;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 2px;
+ left: -4px;
+ width: 5px;
+ height: 1px;
+ transform: rotate(-45deg);
+ background: $cMainBg;
+ content: '';
+ }
+ &.is-up {
+ top: 6px;
+ right: 9px;
+ transform: rotate(45deg);
+ }
+
+ &.is-down {
+ top: 13px;
+ left: 46px;
+ transform: rotate(-135deg);
+ }
+}
+
+.CDB-Shape-Arrow.is-blue {
+ background: $cBlue;
+
+ &::before {
+ background: $cBlue;
+ }
+
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-Arrow.is-white {
+ background: $cWhite;
+
+ &::before {
+ background: $cWhite;
+ }
+
+ &::after {
+ background: $cWhite;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss
new file mode 100644
index 0000000..cf2b1f1
--- /dev/null
+++ b/src/scss/cdb-components/shapes/check-circle.scss
@@ -0,0 +1,156 @@
+/* SG
+# Shapes/Check circle
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+ width: 14px;
+ height: 14px;
+ border: 1px solid $cMainBg;
+ border-radius: 50%;
+
+ &.is-small {
+ width: 12px;
+ height: 12px;
+ transform: translateY(2px);
+ }
+ &.is-blue {
+ border: 1px solid $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ }
+}
+
+.CDB-Shape-tick {
+ display: block;
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ width: 1px;
+ transform: rotate(-45deg);
+ background: $cMainBg;
+ content: '';
+ }
+ &::after {
+ display: block;
+ position: absolute;
+ width: 1px;
+ transform: rotate(45deg);
+ background: $cMainBg;
+ content: '';
+ }
+
+ &.is-medium {
+ &::before {
+ top: 5px;
+ left: 4px;
+ height: 4px;
+ }
+ &::after {
+ top: 3px;
+ right: 5px;
+ height: 6px;
+ }
+ }
+
+ &.is-small {
+ &::before {
+ top: 4px;
+ left: 2px;
+ height: 3px;
+ }
+ &::after {
+ top: 2px;
+ right: 3px;
+ height: 5px;
+ }
+ }
+}
+
+.CDB-Shape-tick.is-blue {
+ &::before {
+ background: $cBlue;
+ }
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-tick.is-white {
+ &::before {
+ background: $cWhite;
+ }
+ &::after {
+ background: $cWhite;
+ }
+}
+
+.CDB-Shape-tick.is-green {
+ &::before {
+ background: $cHighlight;
+ }
+ &::after {
+ background: $cHighlight;
+ }
+}
+
+
+
diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss
new file mode 100644
index 0000000..473f7dc
--- /dev/null
+++ b/src/scss/cdb-components/shapes/close.scss
@@ -0,0 +1,149 @@
+/* SG
+# Shapes/Close
+
+Description
+
+```
+
+
+
+
+
+ 16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-close {
+ display: block;
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ width: 1px;
+ transform: rotate(-45deg);
+ background: $cMainBg;
+ content: '';
+ }
+ &::after {
+ display: block;
+ position: absolute;
+ width: 1px;
+ transform: rotate(45deg);
+ background: $cMainBg;
+ content: '';
+ }
+
+ &.is-huge {
+ &::before {
+ top: -2px;
+ left: 7px;
+ height: 20px;
+ }
+ &::after {
+ top: -2px;
+ right: 8px;
+ height: 20px;
+ }
+ }
+
+ &.is-large {
+ &::before {
+ top: 2px;
+ left: 7px;
+ height: 12px;
+ }
+ &::after {
+ top: 2px;
+ right: 8px;
+ height: 12px;
+ }
+ }
+
+ &.is-medium {
+ &::before {
+ top: 3px;
+ left: 6px;
+ height: 7px;
+ }
+ &::after {
+ top: 3px;
+ right: 6px;
+ height: 7px;
+ }
+ }
+
+ &.is-small {
+ &::before {
+ top: 2px;
+ left: 4px;
+ height: 5px;
+ }
+ &::after {
+ top: 2px;
+ right: 4px;
+ height: 5px;
+ }
+ }
+}
+
+.CDB-Shape-close.is-blue {
+ &::before {
+ background: $cBlue;
+ }
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-close.is-white {
+ &::before {
+ background: $cWhite;
+ }
+ &::after {
+ background: $cWhite;
+ }
+}
+
+.CDB-Shape-close.is-red {
+ &::before {
+ background: $cError;
+ }
+ &::after {
+ background: $cError;
+ }
+}
+
diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss
new file mode 100644
index 0000000..8c3bdeb
--- /dev/null
+++ b/src/scss/cdb-components/shapes/dash.scss
@@ -0,0 +1,85 @@
+/* SG
+# Shapes/Dash
+
+Description
+
+```
+
+
+
+16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-dash {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: 7px;
+ left: 2px;
+ height: 1px;
+ background: $cMainBg;
+ content: '';
+ }
+}
+
+.CDB-Shape-dash.is-small {
+
+ &::before {
+ right: 3px;
+ left: 3px;
+ }
+}
+
+.CDB-Shape-dash.is-blue {
+ &::before {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-dash.is-white {
+ &::before {
+ background: $cWhite;
+ }
+}
+
+
+
diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss
new file mode 100644
index 0000000..71930a1
--- /dev/null
+++ b/src/scss/cdb-components/shapes/dataset.scss
@@ -0,0 +1,146 @@
+/* SG
+# Shapes/Dataset
+
+Description
+
+```
+
+
+
+16px
+
+
+
+
+-
+
+
+
+
+
+
+-
+
+
+
+
+
+
+-
+
+
+
+
+
+
+-
+
+
+
+
+
+
+ +
12px
+
+
+
+
+-
+
+
+
+
+
+
+-
+
+
+
+
+
+
+-
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-Dataset {
+ padding-top: 1px;
+ &.is-small {
+ padding-top: 0;
+ }
+}
+
+.CDB-Shape-DatasetItem {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin-left: -10px;
+ border: 1px solid $cMainBg;
+ border-radius: 50%;
+ background: $cWhite;
+
+ &:first-child {
+ position: relative;
+ margin-left: 0;
+ box-shadow: 3px 0 0 $cWhite;
+ z-index: 1;
+ }
+}
+
+.CDB-Shape-Dataset.is-small {
+ .CDB-Shape-DatasetItem {
+ width: 6px;
+ height: 6px;
+ margin-left: -7px;
+ &:first-child {
+ margin-left: 0;
+ box-shadow: 2px 0 0 $cWhite;
+ }
+ }
+}
+
+.CDB-Shape-Dataset.is-blue {
+ .CDB-Shape-DatasetItem {
+ border: 1px solid $cBlue;
+ }
+}
+
+.CDB-Shape-Dataset.is-grey {
+ .CDB-Shape-DatasetItem {
+ border: 1px solid $cHoverLine;
+ }
+}
+
+.CDB-Shape-Dataset.is-white {
+ .CDB-Shape-DatasetItem {
+ border: 1px solid $cHoverLine;
+ background: $cMainBg;
+ &:first-child {
+ box-shadow: 3px 0 $cMainBg;
+ }
+ }
+}
+
+.CDB-Shape-Dataset.is-white.is-small {
+ .CDB-Shape-DatasetItem:first-child {
+ box-shadow: 2px 0 $cMainBg;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/dots.scss
new file mode 100644
index 0000000..54e61b7
--- /dev/null
+++ b/src/scss/cdb-components/shapes/dots.scss
@@ -0,0 +1,28 @@
+// Shape styles
+// ----------------------------------------------
+
+/* SG
+# Shapes/Dots
+
+You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
+
+```
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-dot {
+ display: inline-block;
+ width: $baseSize;
+ height: $baseSize;
+ border-radius: 50%;
+ background: $cSecondaryLine;
+
+ &.is-selected {
+ background: $cSecondaryText;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss
new file mode 100644
index 0000000..010a296
--- /dev/null
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -0,0 +1,103 @@
+/* SG
+# Shapes/Error circle
+
+Description
+
+```
+
+
+-
+
+
+
16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+ width: 13px;
+ height: 13px;
+ border: 1px solid $cMainBg;
+ border-radius: 50%;
+
+ &.is-small {
+ width: 9px;
+ height: 9px;
+ margin: 0 auto;
+ }
+ &.is-blue {
+ border: 1px solid $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ }
+ &.is-green {
+ border: 1px solid $cHighlight;
+ }
+ &.is-red {
+ border: 1px solid $cError;
+ }
+}
+
+
+.CDB-Shape-CircleItem--fill {
+ &.is-blue {
+ border: 1px solid $cBlue;
+ background: $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ background: $cWhite;
+ }
+ &.is-green {
+ border: 1px solid $cHighlight;
+ background: $cHighlight;
+ }
+ &.is-red {
+ border: 1px solid $cError;
+ background: $cError;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss
new file mode 100644
index 0000000..d5d2bc4
--- /dev/null
+++ b/src/scss/cdb-components/shapes/hamburguer.scss
@@ -0,0 +1,63 @@
+/* SG
+# Shapes/Hamburguer
+
+Description
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-hamburguer {
+ width: $baseSize * 2;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.CDB-Shape-hamburguerItem {
+ height: $baseSize / 4;
+ margin-bottom: $baseSize / 4;
+ background: $cMainBg;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.CDB-Shape-hamburguer.is-blue {
+ .CDB-Shape-hamburguerItem {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-hamburguer.is-white {
+ .CDB-Shape-hamburguerItem {
+ background: $cWhite;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss
new file mode 100644
index 0000000..bec21d4
--- /dev/null
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -0,0 +1,115 @@
+/* SG
+# Shapes/Magnify
+
+Description
+
+```
+
+
+
+
+
+16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-magnify {
+ display: block;
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11px;
+ height: 11px;
+ border: 1px solid $cMainBg;
+ border-radius: 50%;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: -1px;
+ width: 1px;
+ height: 7px;
+ transform: rotate(314deg);
+ background: $cMainBg;
+ content: '';
+ }
+}
+
+.CDB-Shape-magnify.is-blue {
+ &::before {
+ border: 1px solid $cBlue;
+ }
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-magnify.is-white {
+ &::before {
+ border: 1px solid $cWhite;
+ }
+ &::after {
+ background: $cWhite;
+ }
+}
+
+.CDB-Shape-magnify.is-small {
+ &::before {
+ top: 3px;
+ left: 3px;
+ width: 6px;
+ height: 6px;
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 4px;
+ bottom: 2px;
+ width: 1px;
+ height: 5px;
+ transform: rotate(314deg);
+ content: '';
+ }
+}
diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss
new file mode 100644
index 0000000..622ad77
--- /dev/null
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -0,0 +1,161 @@
+/* SG
+# Shapes/Move
+
+Description
+
+```
+
+
+
+16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-rectsHandle {
+ position: relative;
+ padding: 1px 0 0;
+}
+
+.CDB-Shape-rectsHandle.is-small {
+ padding: 3px 0 0 1px;
+
+ .CDB-Shape-rectsHandleItem {
+ height: 2px;
+ margin-bottom: 2px;
+
+ &::before {
+ left: 5px;
+ width: 2px;
+ height: 2px;
+ }
+ &::after {
+ width: 2px;
+ height: 2px;
+ }
+ }
+}
+
+.CDB-Shape-rectsHandleItem {
+ height: 3px;
+ margin-bottom: 3px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ &::before {
+ display: block;
+ position: absolute;
+ left: 4px;
+ width: 3px;
+ height: 3px;
+ background: $cMainBg;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ left: 9px;
+ width: 3px;
+ height: 3px;
+ background: $cMainBg;
+ content: '';
+ }
+}
+
+.CDB-Shape-rectsHandleItem--blue {
+ &::before,
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-rectsHandleItem--white {
+ &::before,
+ &::after {
+ background: $cWhite;
+ }
+}
+
+.CDB-Shape-rectsHandleItem--grey {
+ &::before,
+ &::after {
+ background: $cHoverLine;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/paragraph.scss b/src/scss/cdb-components/shapes/paragraph.scss
new file mode 100644
index 0000000..9c9517b
--- /dev/null
+++ b/src/scss/cdb-components/shapes/paragraph.scss
@@ -0,0 +1,112 @@
+/* SG
+# Shapes/Paragrapgh
+
+Description
+
+```
+
+
+
+
+
+
+
+ 16px
++
+
+
+-
+
- + + +
- + + +
- + + +
- + + +
+
+
+
+
+
+-
+
- + + +
- + + +
- + + +
- + + +
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-paragraph {
+ padding-top: 3px;
+ text-align: left;
+}
+.CDB-Shape-paragraph.is-center {
+ text-align: center;
+}
+.CDB-Shape-paragraph.is-right {
+ text-align: right;
+}
+.CDB-Shape-paragraphItem {
+ height: 1px;
+ margin-bottom: 2px;
+}
+.CDB-Shape-paragraphItem:last-child {
+ margin-bottom: 0;
+}
+
+.CDB-Shape-paragraphBar {
+ display: inline-block;
+ height: 1px;
+ margin-bottom: 2px;
+ background: $cSecondaryLine;
+ vertical-align: top;
+}
+
+.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
+ background: $cBlue;
+}
+
+.CDB-Shape-paragraphBar--01 {
+ width: 12px;
+}
+.CDB-Shape-paragraphBar--02 {
+ width: 6px;
+}
+.CDB-Shape-paragraphBar--03 {
+ width: 8px;
+}
+.CDB-Shape-paragraphBar--04 {
+ width: 4px;
+}
diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
new file mode 100644
index 0000000..effdd59
--- /dev/null
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -0,0 +1,153 @@
+/* SG
+# Shapes/Three Points
+
+Description
+
+```
+-
+
- + + +
- + + +
- + + +
- + + +
24px
+
+
+
+
+
+
+
+
+
++
+
+
+
+
+
+
16px
+
+
+
+
+
+
+
+
+
++
+
+
+
12px
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-threePoints {
+ display: inline-block;
+ padding: 0 4px;
+}
+.CDB-Shape-threePoints.is-horizontal {
+ transform: rotate(90deg);
+ padding: 4px 0;
+}
+
+.CDB-Shape-threePointsItem {
+ width: 2px;
+ height: 2px;
+ margin-bottom: 5px;
+ background: $cMainBg;
+}
+.CDB-Shape-threePointsItem.is-round {
+ border-radius: 50%;
+}
+.CDB-Shape-threePointsItem:last-child {
+ margin-bottom: 0;
+}
+
+.CDB-Shape-threePoints.is-small {
+ padding-top: 2px;
+}
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+ width: 2px;
+ height: 2px;
+ margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-medium {
+ padding-top: 2px;
+}
+.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
+ width: 4px;
+ height: 4px;
+ margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+ background: $cBlue;
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+ background: $cWhite;
+}
diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss
new file mode 100644
index 0000000..90381da
--- /dev/null
+++ b/src/scss/cdb-components/shapes/toogle-arrow.scss
@@ -0,0 +1,147 @@
+/* SG
+# Shapes/Toogle Arrows
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
16px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++
+
+
+
12px
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-ArrowToogle {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 8px;
+ left: 0;
+ width: 10px;
+ height: 1px;
+ transform: rotate(-45deg);
+ background: $cMainBg;
+ content: '';
+ }
+ &::after {
+ display: block;
+ position: absolute;
+ top: 8px;
+ right: -1px;
+ width: 10px;
+ height: 1px;
+ transform: rotate(45deg);
+ background: $cMainBg;
+ content: '';
+ }
+}
+
+.CDB-ArrowToogle.is-down {
+ transform: rotate(180deg);
+}
+
+.CDB-ArrowToogle.is-small {
+ &::before {
+ left: 2px;
+ width: 8px;
+ }
+ &::after {
+ right: 1px;
+ width: 8px;
+ }
+}
+
+.CDB-ArrowToogle.is-blue {
+ &::before {
+ background: $cBlue;
+ }
+ &::after {
+ background: $cBlue;
+ }
+}
+
+.CDB-ArrowToogle.is-white {
+ &::before {
+ background: $cWhite;
+ }
+ &::after {
+ background: $cWhite;
+ }
+}
diff --git a/src/scss/cdb-components/shapes/type.scss b/src/scss/cdb-components/shapes/type.scss
new file mode 100644
index 0000000..1a6decc
--- /dev/null
+++ b/src/scss/cdb-components/shapes/type.scss
@@ -0,0 +1,111 @@
+/* SG
+# Shapes/Type
+
+Description
+
+```
+
+
+
+8px
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape {
+ width: 16px;
+ height: 16px;
+ text-align: center;
+}
+.CDB-Shape--small {
+ width: 8px;
+ height: 8px;
+}
+.CDB-Shape--medium {
+ width: 24px;
+ height: 24px;
+}
+.CDB-Shape:hover {
+ cursor: pointer;
+}
+
+.CDB-Type {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.CDB-Type-circle {
+ position: absolute;
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: $cHoverLine;
+}
+.CDB-Type-circle--01 {
+ top: 0;
+ left: 0;
+}
+.CDB-Type-circle--02 {
+ top: 0;
+ right: 0;
+}
+.CDB-Type-circle--03 {
+ bottom: 0;
+ left: 0;
+}
+.CDB-Type-circle--04 {
+ right: 0;
+ bottom: 0;
+}
+
+.CDB-Type--polygon::before {
+ display: block;
+ position: absolute;
+ top: 1px;
+ right: 1px;
+ bottom: 1px;
+ left: 1px;
+ border: 1px solid $cHoverLine;
+ content: '';
+}
+
+.CDB-Type--line::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 3px;
+ width: 1px;
+ transform: rotate(45deg);
+ background: $cHoverLine;
+ content: '';
+}
diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/tags.scss
new file mode 100644
index 0000000..c8a74ee
--- /dev/null
+++ b/src/scss/cdb-components/tags.scss
@@ -0,0 +1,136 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Tags / Privacy
+
+```
+
+
+
+
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
+.CDB-Tag {
+ padding: 0 3px;
+ border: 1px solid $cBlue;
+ border-radius: 2px;
+ color: $cBlue;
+
+ &.is-public {
+ border: 1px solid $cPublic;
+ color: $cPublic;
+ }
+ &.is-link {
+ border: 1px solid $cLink;
+ color: $cLink;
+ }
+ &.is-password {
+ border: 1px solid $cPassword;
+ color: $cPassword;
+ }
+ &.is-private {
+ border: 1px solid $cError;
+ color: $cError;
+ }
+}
+
+/* SG
+# Tags / Metadata
+
+```
+
+
+
+
+
+
+
+
+ -
+
- + + +
- + + +
- + + +
-
+
- + + +
- + + +
- + + +
+
+
+
+
+627K Transactions
+
+
+
+
+
+627K Transactions
+
+
+
+
+
+627K Transactions
+
+
+
+
+
+627K Transactions
+
+
+
+
+
+627K Transactions
+
+
+
+
+
+
+627K Transactions
+
+
+
+
+
+627K Transactions
+
+
+
+
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
+
+.CDB-InfoTooltip {
+ display: inline-block;
+ position: absolute;
+ padding: $baseSize;
+ border-radius: $halfBaseSize;
+ background: rgba($cMainBg, 0.8);
+}
+.CDB-InfoTooltip::after {
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: 4px solid transparent;
+ content: '';
+}
+
+.is-black {
+ &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+ border-bottom-color: rgba($cMainBg, 0.8);
+ }
+ &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+ border-top-color: rgba($cMainBg, 0.8);
+ }
+ &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+ border-right-color: rgba($cMainBg, 0.8);
+ }
+ &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+ border-left-color: rgba($cMainBg, 0.8);
+ }
+}
+
+.is-error {
+ &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+ border-bottom-color: $cError;
+ }
+ &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+ border-top-color: $cError;
+ }
+ &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+ border-right-color: $cError;
+ }
+ &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+ border-left-color: $cError;
+ }
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+ top: -$baseSize;
+ left: calc(50% - #{$halfBaseSize});
+ border-top-width: $halfBaseSize;
+ border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+ bottom: -$baseSize;
+ left: calc(50% - #{$halfBaseSize});
+ border-top-width: $halfBaseSize;
+ border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+ top: calc(50% - #{$halfBaseSize});
+ left: -$baseSize;
+ border-right-width: $halfBaseSize;
+ border-right-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+ top: calc(50% - #{$halfBaseSize});
+ right: -$baseSize;
+ border-right-width: $halfBaseSize;
+ border-right-style: solid;
+}
+
+.CDB-InfoTooltip.is-error {
+ background: $cError;
+}
+
+.CDB-InfoTooltip-text {
+ color: $cWhite;
+}
diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss
new file mode 100644
index 0000000..1487433
--- /dev/null
+++ b/src/scss/cdb-components/typography.scss
@@ -0,0 +1,77 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Typography
+
+```
+
+
+627K Transactions
+Open Sans 26/34 Regular
+Open Sans 26/34 Light
+Open Sans 16/22 Regular
+Open Sans 12/16 Semibold
+Open Sans 12/16 Semibold Uppercase
+Open Sans 12/16 Regular
+Open Sans 12/16 Regular
+Open Sans 12/16 Regular
+Open Sans 10/14 Semibold
+Open Sans 10/14 Regular
+? +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Text { + font-family: 'Open Sans'; + $sFontWeight-normal: 400; + + &.is-semibold { + font-weight: $sFontWeight-semibold; + } + &.is-light { + font-weight: $sFontWeight-lighter; + } +} + +.is-underlined { + border-bottom: 1px dotted $cMainLine; +} + +.CDB-Size-huge { + font-size: $sFontSize-huge; + line-height: $sLineHeight-huge; +} + +.CDB-Size-large { + font-size: $sFontSize-large; + line-height: $sLineHeight-large; +} + +.CDB-Size-medium { + font-size: $sFontSize-medium; + line-height: $sLineHeight-medium; +} + +.CDB-Size-small { + font-size: $sFontSize-small; + line-height: $sLineHeight-small; + +} + +.CDB-Size-small.u-whiteTextColor { + -webkit-font-smoothing: initial; +} + +.CDB-FontSize-small { + font-size: $sFontSize-small; +} + +.CDB-FontSize-medium { + font-size: $sFontSize-medium; +} + +.CDB-IconFont.is-disabled { + opacity: 0.24; +} + diff --git a/src/scss/cdb-icon-font.scss b/src/scss/cdb-icon-font.scss new file mode 100644 index 0000000..f417fee --- /dev/null +++ b/src/scss/cdb-icon-font.scss @@ -0,0 +1,1277 @@ +// Icon font elements +// ---------------------------------------------- + +// Do not import any file (variables, mixins,...) in this stylesheet. + +@font-face { + font-family: 'CartoIcon'; + src: url('../fonts/cartoIcon.eot'); + src: url('../fonts/cartoIcon.eot?#iefix') format('embedded-opentype'), + url('../fonts/cartoIcon.woff') format('woff'), + url('../fonts/cartoIcon.ttf') format('truetype'), + url('../fonts/cartoIcon.svg?ey3vsq#cartoIcon') format('svg'); + font-weight: normal; + font-style: normal; +} + +.CDB-IconFont { + display: inline-block; + font-family: 'CartoIcon'; + font-style: normal; + font-weight: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1; +} + +.CDB-IconFont--center { + vertical-align: middle; +} +.CDB-IconFont--top { + vertical-align: top; +} +.CDB-IconFont--small { + font-size: 11px; +} + +/* SG +# Typography/Icon font +All available icons in CartoDB. + +``` + + +
+
+
+
+
+ clock
+
+
+
+
+
+ stats
+
+
+
+
+
+ heartEmpty
+
+
+
+
+
+ heartFill
+
+
+
+
+
+ alert
+
+
+
+
+
+ rows
+
+
+
+
+
+ check
+
+
+
+
+
+ dribbble
+
+
+ twitter
+
+
+
+
+
+
+
+
+ caretDown
+
+
+
+
+
+ lightbulb
+
+
+
+
+
+ explore
+
+
+
+
+
+ drop
+
+
+
+
+
+ edition
+
+
+
+
+
+ view
+
+
+
+
+
+ odyssey
+
+
+
+
+
+ settings
+
+
+
+
+
+ downloadCircle
+
+
+
+
+
+ pencilMenu
+
+
+
+
+
+ mobile
+
+
+
+
+
+ wizard
+
+
+
+
+
+ undo
+
+
+
+
+
+ redo
+
+
+
+
+
+ lArrowLight
+
+
+
+
+
+ hide
+
+
+
+
+
+ info
+
+
+
+
+
+ fork
+
+
+ facebook
+
+
+
+
+
+
+
+
+ folder
+
+
+
+
+
+ dropbox
+
+
+
+
+
+ cloud
+
+
+
+
+
+ step
+
+
+
+
+
+ addDocument
+
+
+
+
+
+ arrowNext
+
+
+
+
+
+ arrowPrev
+
+
+
+
+
+ close
+
+
+
+
+
+ cartoFante
+
+
+
+
+
+ lock
+
+
+
+
+
+ cartoDB
+
+
+
+
+
+ lens
+
+
+
+
+
+ closeLimits
+
+
+
+
+
+ defaultUser
+
+
+
+
+
+ cockroach
+
+
+
+
+
+ floppy
+
+
+
+
+
+ trash
+
+
+
+
+
+ wifi
+
+
+
+
+
+ unlock
+
+
+
+
+
+ unlockWithEllipsis
+
+
+
+
+
+ gift
+
+
+
+
+
+ people
+
+
+
+
+
+ play
+
+
+
+
+
+ add
+
+
+
+
+
+ map
+
+
+
+
+
+ anchor
+
+
+
+
+
+ key
+
+
+
+
+
+ calendar
+
+
+
+
+
+ document
+
+
+
+
+
+ eye
+
+
+
+
+
+ marker
+
+
+
+
+
+ progressBar
+
+
+
+
+
+ book
+
+
+
+
+
+ notes
+
+
+
+
+
+ rectangles
+
+
+
+
+
+ mountain
+
+
+
+
+
+ points
+
+
+
+
+
+ snake
+
+
+
+
+
+ boss
+
+
+
+
+
+ rocket
+
+
+
+
+
+ barometer
+
+
+
+
+
+ dollar
+
+
+ email
+
+
+
+
+
+
+
+
+ label
+
+
+
+
+
+ outside
+
+
+
+
+
+ jigsaw
+
+
+
+
+
+ tools
+
+
+
+
+
+ question
+
+
+
+
+
+ layerStack
+
+
+
+
+
+ alarm
+
+
+
+
+
+ cloudDownArrow
+
+
+
+
+
+ pencil
+
+
+
+
+
+ fountainPen
+
+
+
+
+
+ emptyDoc
+
+
+
+
+
+ mergeArrow
+
+
+
+
+
+ mergeColumns
+
+
+
+
+
+ mergeSpatial
+
+
+
+
+
+ globe
+
+
+
+
+
+ chevronDown
+
+
+
+
+
+ streets
+
+
+
+
+
+ keys
+
+
+
+
+
+ facebookSquare
+
+
+
+
+
+ fullscreen
+
+
+
+
+
+ rArrowLight
+
+
+
+
+
+ share
+
+
+ linkedin
+
+
+
+
+
+
+
+
+ calendarBlank
+
+
+
+
+
+ creativeCommons
+
+
+
+
+
+ bubble
+
+
+
+
+
+ bars
+
+
+
+
+
+ arrowMenuLight
+
+
+
+
+
+ tieFighter
+
+
+
+
+
+ ray
+
+
+
+
+
+ markup
+
+
+
+
+
+ table
+
+
+
+
+
+ airlock
+
+
+
+
+
+ pin
+
+
+
+
+
+ attache
+
+
+
+
+
+ download
+
+
+
+
+
+ group
+
+
+
+
+
+ dashboard
+
+
+
+
+
+ spinner
+
+
+
+
+
+ mapsearch
+
+
+
+
+```
+*/
+
+
+
+.CDB-IconFont-clock::before {
+ content: '\E001';
+}
+
+
+.CDB-IconFont-stats::before {
+ content: '\E002';
+}
+
+
+.CDB-IconFont-heartEmpty::before {
+ content: '\E003';
+}
+
+
+.CDB-IconFont-heartFill::before {
+ content: '\E004';
+}
+
+
+.CDB-IconFont-alert::before {
+ content: '\E005';
+}
+
+
+.CDB-IconFont-rows::before {
+ content: '\E006';
+}
+
+
+.CDB-IconFont-check::before {
+ content: '\E007';
+}
+
+
+.CDB-IconFont-dribbble::before {
+ content: '\E008';
+}
+
+
+.CDB-IconFont-twitter::before {
+ content: '\E009';
+}
+
+
+.CDB-IconFont-caretDown::before {
+ content: '\E00A';
+}
+
+
+.CDB-IconFont-lightbulb::before {
+ content: '\E00B';
+}
+
+
+.CDB-IconFont-explore::before {
+ content: '\E00C';
+}
+
+
+.CDB-IconFont-drop::before {
+ content: '\E00D';
+}
+
+
+.CDB-IconFont-edition::before {
+ content: '\E00E';
+}
+
+
+.CDB-IconFont-view::before {
+ content: '\E00F';
+}
+
+
+.CDB-IconFont-odyssey::before {
+ content: '\E010';
+}
+
+
+.CDB-IconFont-settings::before {
+ content: '\E011';
+}
+
+
+.CDB-IconFont-downloadCircle::before {
+ content: '\E012';
+}
+
+
+.CDB-IconFont-pencilMenu::before {
+ content: '\E013';
+}
+
+
+.CDB-IconFont-mobile::before {
+ content: '\E014';
+}
+
+
+.CDB-IconFont-wizard::before {
+ content: '\E015';
+}
+
+
+.CDB-IconFont-undo::before {
+ content: '\E016';
+}
+
+
+.CDB-IconFont-redo::before {
+ content: '\E017';
+}
+
+
+.CDB-IconFont-lArrowLight::before {
+ content: '\E018';
+}
+
+
+.CDB-IconFont-hide::before {
+ content: '\E019';
+}
+
+
+.CDB-IconFont-info::before {
+ content: '\E01A';
+}
+
+
+.CDB-IconFont-fork::before {
+ content: '\E01B';
+}
+
+
+.CDB-IconFont-facebook::before {
+ content: '\E01C';
+}
+
+
+.CDB-IconFont-folder::before {
+ content: '\E01D';
+}
+
+
+.CDB-IconFont-dropbox::before {
+ content: '\E01E';
+}
+
+
+.CDB-IconFont-cloud::before {
+ content: '\E01F';
+}
+
+
+.CDB-IconFont-step::before {
+ content: '\E020';
+}
+
+
+.CDB-IconFont-addDocument::before {
+ content: '\E021';
+}
+
+
+.CDB-IconFont-arrowNext::before {
+ content: '\E022';
+}
+
+
+.CDB-IconFont-arrowPrev::before {
+ content: '\E023';
+}
+
+
+.CDB-IconFont-close::before {
+ content: '\E024';
+}
+
+
+.CDB-IconFont-cartoFante::before {
+ content: '\E025';
+}
+
+
+.CDB-IconFont-lock::before {
+ content: '\E026';
+}
+
+
+.CDB-IconFont-cartoDB::before {
+ content: '\E027';
+}
+
+
+.CDB-IconFont-lens::before {
+ content: '\E028';
+}
+
+
+.CDB-IconFont-closeLimits::before {
+ content: '\E029';
+}
+
+
+.CDB-IconFont-defaultUser::before {
+ content: '\E02A';
+}
+
+
+.CDB-IconFont-cockroach::before {
+ content: '\E02B';
+}
+
+
+.CDB-IconFont-floppy::before {
+ content: '\E02C';
+}
+
+
+.CDB-IconFont-trash::before {
+ content: '\E02D';
+}
+
+
+.CDB-IconFont-wifi::before {
+ content: '\E02E';
+}
+
+
+.CDB-IconFont-unlock::before {
+ content: '\E02F';
+}
+
+
+.CDB-IconFont-unlockWithEllipsis::before {
+ content: '\E030';
+}
+
+
+.CDB-IconFont-gift::before {
+ content: '\E031';
+}
+
+
+.CDB-IconFont-people::before {
+ content: '\E032';
+}
+
+
+.CDB-IconFont-play::before {
+ content: '\E033';
+}
+
+
+.CDB-IconFont-add::before {
+ content: '\E034';
+}
+
+
+.CDB-IconFont-map::before {
+ content: '\E035';
+}
+
+
+.CDB-IconFont-anchor::before {
+ content: '\E036';
+}
+
+
+.CDB-IconFont-key::before {
+ content: '\E037';
+}
+
+
+.CDB-IconFont-calendar::before {
+ content: '\E038';
+}
+
+
+.CDB-IconFont-document::before {
+ content: '\E039';
+}
+
+
+.CDB-IconFont-eye::before {
+ content: '\E03A';
+}
+
+
+.CDB-IconFont-marker::before {
+ content: '\E03B';
+}
+
+
+.CDB-IconFont-progressBar::before {
+ content: '\E03C';
+}
+
+
+.CDB-IconFont-book::before {
+ content: '\E03D';
+}
+
+
+.CDB-IconFont-notes::before {
+ content: '\E03E';
+}
+
+
+.CDB-IconFont-rectangles::before {
+ content: '\E03F';
+}
+
+
+.CDB-IconFont-mountain::before {
+ content: '\E040';
+}
+
+
+.CDB-IconFont-points::before {
+ content: '\E041';
+}
+
+
+.CDB-IconFont-snake::before {
+ content: '\E042';
+}
+
+
+.CDB-IconFont-boss::before {
+ content: '\E043';
+}
+
+
+.CDB-IconFont-rocket::before {
+ content: '\E044';
+}
+
+
+.CDB-IconFont-barometer::before {
+ content: '\E045';
+}
+
+
+.CDB-IconFont-dollar::before {
+ content: '\E046';
+}
+
+
+.CDB-IconFont-email::before {
+ content: '\E047';
+}
+
+
+.CDB-IconFont-label::before {
+ content: '\E048';
+}
+
+
+.CDB-IconFont-outside::before {
+ content: '\E049';
+}
+
+
+.CDB-IconFont-jigsaw::before {
+ content: '\E04A';
+}
+
+
+.CDB-IconFont-tools::before {
+ content: '\E04B';
+}
+
+
+.CDB-IconFont-question::before {
+ content: '\E04C';
+}
+
+
+.CDB-IconFont-layerStack::before {
+ content: '\E04D';
+}
+
+
+.CDB-IconFont-alarm::before {
+ content: '\E04E';
+}
+
+
+.CDB-IconFont-cloudDownArrow::before {
+ content: '\E04F';
+}
+
+
+.CDB-IconFont-pencil::before {
+ content: '\E050';
+}
+
+
+.CDB-IconFont-fountainPen::before {
+ content: '\E051';
+}
+
+
+.CDB-IconFont-emptyDoc::before {
+ content: '\E052';
+}
+
+
+.CDB-IconFont-mergeArrow::before {
+ content: '\E053';
+}
+
+
+.CDB-IconFont-mergeColumns::before {
+ content: '\E054';
+}
+
+
+.CDB-IconFont-mergeSpatial::before {
+ content: '\E055';
+}
+
+
+.CDB-IconFont-globe::before {
+ content: '\E056';
+}
+
+
+.CDB-IconFont-chevronDown::before {
+ content: '\E057';
+}
+
+
+.CDB-IconFont-streets::before {
+ content: '\E058';
+}
+
+
+.CDB-IconFont-keys::before {
+ content: '\E059';
+}
+
+
+.CDB-IconFont-facebookSquare::before {
+ content: '\E05A';
+}
+
+
+.CDB-IconFont-fullscreen::before {
+ content: '\E05B';
+}
+
+
+.CDB-IconFont-rArrowLight::before {
+ content: '\E05C';
+}
+
+
+.CDB-IconFont-share::before {
+ content: '\E05D';
+}
+
+
+.CDB-IconFont-linkedin::before {
+ content: '\E05E';
+}
+
+
+.CDB-IconFont-calendarBlank::before {
+ content: '\E05F';
+}
+
+
+.CDB-IconFont-creativeCommons::before {
+ content: '\E060';
+}
+
+
+.CDB-IconFont-bubble::before {
+ content: '\E061';
+}
+
+
+.CDB-IconFont-bars::before {
+ content: '\E062';
+}
+
+
+.CDB-IconFont-arrowMenuLight::before {
+ content: '\E063';
+}
+
+
+.CDB-IconFont-tieFighter::before {
+ content: '\E064';
+}
+
+
+.CDB-IconFont-ray::before {
+ content: '\E065';
+}
+
+
+.CDB-IconFont-markup::before {
+ content: '\E066';
+}
+
+
+.CDB-IconFont-table::before {
+ content: '\E067';
+}
+
+
+.CDB-IconFont-airlock::before {
+ content: '\E068';
+}
+
+
+.CDB-IconFont-pin::before {
+ content: '\E069';
+}
+
+
+.CDB-IconFont-attache::before {
+ content: '\E06A';
+}
+
+
+.CDB-IconFont-download::before {
+ content: '\E06B';
+}
+
+
+.CDB-IconFont-group::before {
+ content: '\E06C';
+}
+
+
+.CDB-IconFont-dashboard::before {
+ content: '\E06D';
+}
+
+
+.CDB-IconFont-spinner::before {
+ content: '\E06E';
+}
+
+
+.CDB-IconFont-mapsearch::before {
+ content: '\E06F';
+}
+
+
+.CDB-IconFont-rArrow::before {
+ content: '\E070';
+}
diff --git a/src/scss/cdb-utilities/_mixins.scss b/src/scss/cdb-utilities/_mixins.scss
new file mode 100644
index 0000000..d393024
--- /dev/null
+++ b/src/scss/cdb-utilities/_mixins.scss
@@ -0,0 +1,236 @@
+// Mixins
+// - Necessary SCSS functions
+// - Browser support:
+// · IE => 10
+// · Chrome => 21
+// · Sarafi => 6
+// · Firefox => 24
+// · Opera => 12
+// --------------------------------------------------
+
+/* ADDS A BROWSER PREFIX TO THE PROPERTY */
+@mixin css3-prefix($property, $value) {
+ -webkit-#{$property}: #{$value};
+ -khtml-#{$property}: #{$value};
+ -moz-#{$property}: #{$value};
+ -ms-#{$property}: #{$value};
+ -o-#{$property}: #{$value};
+ #{$property}: #{$value};
+}
+
+// Display inline
+@mixin inline-block() {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+// Display flex functions
+@mixin display-flex() {
+ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+ display: -ms-flexbox; /* TWEENER - IE 10 */
+ display: -webkit-flex; /* NEW - Chrome */
+ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+@mixin flex($v) {
+ -webkit-box-flex: $v;
+ -moz-box-flex: $v;
+ -webkit-flex: $v;
+ -ms-flex: $v;
+ flex: $v;
+}
+@mixin flex-direction($v) {
+ -webkit-flex-direction: $v;
+ -moz-flex-direction: $v;
+ -ms-flex-direction: $v;
+ flex-direction: $v;
+ // IE10 doesn't support this property
+}
+@mixin flex-grow($v) {
+ -webkit-flex-grow: $v;
+ -moz-flex-grow: $v;
+ -ms-flex-grow: $v;
+ flex-grow: $v;
+ // IE10 fallback
+ -ms-flex: $v 0 auto;
+}
+@mixin flex-wrap($v) {
+ -webkit-flex-wrap: $v;
+ -moz-flex-wrap: $v;
+ -ms-flex-wrap: $v;
+ flex-wrap: $v;
+ // IE10 doesn't support this property
+}
+@mixin flex-order($v) {
+ -webkit-flex-order: $v;
+ -webkit-box-ordinal-group: $v;
+ -moz-box-ordinal-group: $v;
+ -moz-flex-order: $v;
+ -ms-flex-order: $v;
+ -ms-order: $v;
+ box-ordinal-group: $v;
+ flex-order: $v;
+ order: $v;
+}
+@mixin justify-content($v, $ie-v: "") {
+ -webkit-justify-content: $v;
+ -moz-justify-content: $v;
+ -ms-justify-content: $v;
+ justify-content: $v;
+ // Hello IE10
+ -ms-flex-pack: if($ie-v != "", $ie-v, $v);
+}
+@mixin align-items($v, $ie-v: "") {
+ -webkit-align-items: $v;
+ -moz-align-items: $v;
+ -ms-align-items: $v;
+ align-items: $v;
+ // Hello IE10
+ -ms-flex-align: if($ie-v != "", $ie-v, $v);
+}
+@mixin align-content($v, $ie-v: "") {
+ -webkit-align-content: $v;
+ -moz-align-content: $v;
+ -ms-align-content: $v;
+ align-content: $v;
+ // Hello IE10
+ -ms-flex-align: if($ie-v != "", $ie-v, $v);
+}
+
+// CSS3 typical functions
+@mixin opacity($v) {
+ opacity:$v;
+ filter:alpha(opacity=($v*100)); // IE10
+}
+
+@mixin grayscale() {
+ -webkit-filter: grayscale(100%);
+ -moz-filter: grayscale(100%);
+ -ms-filter: grayscale(100%);
+ -o-filter: grayscale(100%);
+ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
+}
+
+
+@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
+ background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+ background-image: -moz-linear-gradient(top, $startColor, $endColor);
+ background-image: -ms-linear-gradient(top, $startColor, $endColor);
+ background-image: -o-linear-gradient(top, $startColor, $endColor);
+ background-image: linear-gradient(top, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
+}
+
+@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
+ background-color: $startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+ background-image: -moz-linear-gradient(left, $startColor, $endColor);
+ background-image: -ms-linear-gradient(left, $startColor, $endColor);
+ background-image: -o-linear-gradient(left, $startColor, $endColor);
+ background-image: linear-gradient(left, $startColor, $endColor);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
+}
+
+@mixin image-2x($image, $width, $height, $x: 0, $y: 0) {
+ @media (min--moz-device-pixel-ratio: 1.3),
+ (-o-min-device-pixel-ratio: 2.6/2),
+ (-webkit-min-device-pixel-ratio: 1.3),
+ (min-device-pixel-ratio: 1.3),
+ (min-resolution: 1.3dppx) {
+ /* on retina, use image that's scaled by 2 */
+ background: url($image);
+ background-size: $width $height;
+ background-position: $x $y;
+ }
+}
+
+@mixin transform($params) {
+ @include css3-prefix('transform', $params);
+}
+
+@mixin transform-style($style: preserve-3d) {
+ @include css3-prefix('transform-style', $style);
+}
+
+@mixin transition($properties...) {
+
+ @if length($properties) >= 1 {
+ @include css3-prefix('transition', $properties);
+ }
+
+ @else {
+ @include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);
+ }
+}
+
+
+/* FONT FACE */
+@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
+ @font-face {
+ font-family: $fontFamily;
+ src: url($eotFileSrc) format('eot'),
+ url($woffFileSrc) format('woff'),
+ url($ttfFileSrc) format('truetype'),
+ url($svgFileSrc + $svgFontID) format('svg');
+ }
+}
+
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes #{$animation-name} {
+ @content;
+ }
+ @-moz-keyframes #{$animation-name} {
+ @content;
+ }
+ @-ms-keyframes #{$animation-name} {
+ @content;
+ }
+ @-o-keyframes #{$animation-name} {
+ @content;
+ }
+ @keyframes #{$animation-name} {
+ @content;
+ }
+}
+
+@mixin text-overflow() {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@mixin animation($str) {
+ @include css3-prefix('animation', $str);
+}
+
+@mixin line-clamp($lines) {
+ height: $lines * $sLineHeight-normal;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: $lines;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ &:after {
+ content: ' ';
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: $sLineHeight-normal;
+ width: 2 * $sLineHeight-normal;
+ @include background-horizontal(rgba(255,255,255,0), rgba(255,255,255,1));
+ }
+}
+
+@mixin media-query() {
+ @media only screen and (min-width: 320px) and (max-width: 960px) {
+ @content;
+ }
+}
+@mixin media-query-mobile() {
+ @media only screen and (max-width: 600px) {
+ @content;
+ }
+}
diff --git a/src/scss/cdb-utilities/defaults.css.scss b/src/scss/cdb-utilities/defaults.css.scss
new file mode 100644
index 0000000..aaabb14
--- /dev/null
+++ b/src/scss/cdb-utilities/defaults.css.scss
@@ -0,0 +1,18 @@
+// Default classes
+// ----------------------------------------------
+
+@import '../cdb-variables/colors';
+
+body {
+ color: $cMainText;
+}
+
+a {
+ color: $cBlue;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss
new file mode 100644
index 0000000..8c8bf83
--- /dev/null
+++ b/src/scss/cdb-utilities/fonts.scss
@@ -0,0 +1,30 @@
+// Fonts
+// --------------------------------------------------
+
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/OpenSans-Light.eot');
+ src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-Light.woff') format('woff'),
+ url('../fonts/OpenSans-Light.ttf') format('truetype');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/OpenSans-Regular.eot');
+ src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-Regular.woff') format('woff'),
+ url('../fonts/OpenSans-Regular.ttf') format('truetype');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/OpenSans-Semibold.eot');
+ src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/OpenSans-Semibold.woff') format('woff'),
+ url('../fonts/OpenSans-Semibold.ttf') format('truetype');
+}
diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss
new file mode 100644
index 0000000..c8d83d6
--- /dev/null
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -0,0 +1,138 @@
+// Helper classes
+// ----------------------------------------------
+
+@import './mixins';
+@import '../cdb-variables/colors';
+
+/* Margins */
+.u-tSpace {
+ margin-top: 4px;
+}
+.u-tSpace--m {
+ margin-top: 8px;
+}
+.u-tSpace-xl {
+ margin-top: 12px;
+}
+.u-rSpace--s {
+ margin-right: 2px;
+}
+.u-rSpace {
+ margin-right: 4px;
+}
+.u-rSpace--m {
+ margin-right: 8px;
+}
+.u-rSpace--xl {
+ margin-right: 12px;
+}
+.u-bSpace {
+ margin-bottom: 4px;
+}
+.u-bSpace--m {
+ margin-bottom: 8px;
+}
+.u-bSpace--xl {
+ margin-bottom: 12px;
+}
+.u-lSpace {
+ margin-left: 4px;
+}
+.u-lSpace--xl {
+ margin-left: 12px;
+}
+
+.u-ellipsis {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+// Colors
+// Main Text Color is default color
+// ----------------------------------------------
+
+.u-actionTextColor {
+ color: $cBlue;
+}
+.u-mainTextColor {
+ color: $cMainText;
+}
+.u-secondaryTextColor {
+ color: $cSecondaryText;
+}
+.u-altTextColor {
+ color: $cAltText;
+}
+.u-hintTextColor {
+ color: $cHintText;
+}
+.u-alertTextColor {
+ color: $cAlert;
+}
+.u-whiteTextColor {
+ color: $cWhite;
+}
+.u-errorTextColor {
+ color: $cError;
+}
+
+/* Displays */
+.u-iBlock {
+ @include inline-block();
+}
+.u-showDesktop {
+ display: block !important;
+}
+.u-showMobile {
+ display: none !important;
+}
+
+/* Decoration */
+.u-upperCase {
+ text-transform: uppercase;
+}
+
+/* Flex */
+.u-flex {
+ @include display-flex();
+}
+.u-justifySpace {
+ @include justify-content(space-between);
+}
+.u-justifyCenter {
+ @include justify-content(center);
+}
+.u-justifyStart {
+ @include justify-content(flex-start);
+}
+.u-justifyEnd {
+ @include justify-content(flex-end);
+}
+.u-alignStart {
+ @include align-items(flex-start);
+}
+.u-alignCenter {
+ @include align-items(center);
+}
+.u-alignEnd {
+ @include align-items(flex-end);
+}
+
+
+/* Media queries*/
+@include media-query-mobile() {
+ .u-showDesktop {
+ display: none !important;
+ }
+ .u-showMobile {
+ display: block !important;
+ }
+}
+
+/* helper mixins */
+@mixin default-form-error-style() {
+ border: 1px solid rgba($cError, 0.48);
+ background: rgba($cError, 0.04);
+ color: $cError;
+}
diff --git a/src/scss/cdb-utilities/vendor/normalize.scss b/src/scss/cdb-utilities/vendor/normalize.scss
new file mode 100644
index 0000000..7bd6216
--- /dev/null
+++ b/src/scss/cdb-utilities/vendor/normalize.scss
@@ -0,0 +1,608 @@
+/* ==========================================================================
+ Normalize.scss settings
+ ========================================================================== */
+/**
+ * Includes legacy browser support IE6/7
+ *
+ * Set to false if you want to drop support for IE6 and IE7
+ */
+
+$legacy_browser_support: false !default;
+
+/* Base
+ ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ * without disabling user zoom.
+ * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ * `em` units.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ @if $legacy_browser_support {
+ *font-size: 100%; /* 3 */
+ }
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+ @if $legacy_browser_support {
+ *display: inline;
+ *zoom: 1;
+ }
+}
+
+/**
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a {
+ &:active, &:hover {
+ outline: 0;
+ };
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+@if $legacy_browser_support {
+ blockquote {
+ margin: 1em 40px;
+ }
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+@if $legacy_browser_support {
+ h2 {
+ font-size: 1.5em;
+ margin: 0.83em 0;
+ }
+
+ h3 {
+ font-size: 1.17em;
+ margin: 1em 0;
+ }
+
+ h4 {
+ font-size: 1em;
+ margin: 1.33em 0;
+ }
+
+ h5 {
+ font-size: 0.83em;
+ margin: 1.67em 0;
+ }
+
+ h6 {
+ font-size: 0.67em;
+ margin: 2.33em 0;
+ }
+}
+
+/**
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+@if $legacy_browser_support {
+
+ /**
+ * Addresses margins set differently in IE 6/7.
+ */
+
+ p,
+ pre {
+ *margin: 1em 0;
+ }
+
+ /*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+
+ q {
+ *quotes: none;
+ }
+
+ /*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+
+ q:before,
+ q:after {
+ content: '';
+ content: none;
+ }
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+@if $legacy_browser_support {
+
+ /* ==========================================================================
+ Lists
+ ========================================================================== */
+
+ /*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+ dl,
+ menu,
+ ol,
+ ul {
+ *margin: 1em 0;
+ }
+
+ dd {
+ *margin: 0 0 0 40px;
+ }
+
+ /*
+ * Addresses paddings set differently in IE 6/7.
+ */
+
+ menu,
+ ol,
+ ul {
+ *padding: 0 0 0 40px;
+ }
+
+ /*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+
+ nav ul,
+ nav ol {
+ *list-style: none;
+ *list-style-image: none;
+ }
+
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 8/9/10.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+ border: 0;
+ @if $legacy_browser_support {
+ *-ms-interpolation-mode: bicubic; /* 2 */
+ }
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ @if $legacy_browser_support {
+ _font-family: 'courier new', monospace;
+ }
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ * 4. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+ @if $legacy_browser_support {
+ vertical-align: baseline; /* 3 */
+ *vertical-align: middle; /* 3 */
+ }
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ * Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+ @if $legacy_browser_support {
+ *overflow: visible; /* 4 */
+ }
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ * Known issue: excess padding remains in IE 6.
+ */
+
+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
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 3. Corrects text not wrapping in Firefox 3.
+ * 4. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+ @if $legacy_browser_support {
+ white-space: normal; /* 3 */
+ *margin-left: -7px; /* 4 */
+ }
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+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-utilities/vendor/reset.scss b/src/scss/cdb-utilities/vendor/reset.scss
new file mode 100644
index 0000000..06fe9d1
--- /dev/null
+++ b/src/scss/cdb-utilities/vendor/reset.scss
@@ -0,0 +1,59 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ font-size: 100%;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+// Resetting buttons too
+button {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background: transparent;
+ box-sizing: border-box;
+ outline: none;
+}
+dd, dt {
+ display: inline-block;
+}
diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss
new file mode 100644
index 0000000..394a701
--- /dev/null
+++ b/src/scss/cdb-variables/_colors.scss
@@ -0,0 +1,33 @@
+// Colors variables
+// ----------------------------------------------
+
+// General
+$cBlue: #1181FB;
+$cBlack: #000;
+$cWhite: #FFF;
+$cMainBg: #2E3C43;
+
+//Structure
+$cSecondaryDark: #282C2F;
+$cSecondaryBackground: #F2F6F9;
+$cThirdBackground: #F9F9F9;
+
+//Lines
+$cHoverLine: #AAA;
+$cMainLine: #DDD;
+$cSecondaryLine: #EEE;
+
+//Typography
+$cMainText: #2E3C43;
+$cSecondaryText: #636D72;
+$cAltText: #979EA1;
+$cHintText: #CBCED0;
+
+//Others
+$cHighlight: #9DE0AD;
+$cAlert: #F19243;
+$cPublic: #9BC63B;
+$cLink: #FEB100;
+$cPassword: #FB7B23;
+$cError: #F15743;
+$cHighlightYellow: #FFFFC0;
diff --git a/src/scss/cdb-variables/_sizes.scss b/src/scss/cdb-variables/_sizes.scss
new file mode 100644
index 0000000..ebb911a
--- /dev/null
+++ b/src/scss/cdb-variables/_sizes.scss
@@ -0,0 +1,31 @@
+// Sizes variables
+// ----------------------------------------------
+
+// Widths
+$desktopLayout: 352px;
+$mobileLayout: 280px;
+
+//Base
+$baseSize: 8px;
+$halfBaseSize: $baseSize / 2;
+
+// Margins
+$sMargin-section: 24px; // To separate main section
+$sMargin-element: 14px; // To separate elements inside a group
+
+// Font sizes
+$sFontSize-small: 10px;
+$sFontSize-medium: 12px;
+$sFontSize-large: 16px;
+$sFontSize-huge: 26px;
+
+// Font weights
+$sFontWeight-lighter: 300;
+$sFontWeight-normal: 400;
+$sFontWeight-semibold: 600;
+
+// Line heights
+$sLineHeight-small: 14px;
+$sLineHeight-medium: 16px;
+$sLineHeight-large: 22px;
+$sLineHeight-huge: 34px;
diff --git a/styleguide/_template.html b/styleguide/_template.html
new file mode 100644
index 0000000..f892cf2
--- /dev/null
+++ b/styleguide/_template.html
@@ -0,0 +1,978 @@
+
+
+
+
+{{> theme}}
+{{> highlight}}
+{{> jquery}}
+
+
+
+
+
+rArrow
+
+
diff --git a/styleguide/theme.css b/styleguide/theme.css
new file mode 100644
index 0000000..c84c1f2
--- /dev/null
+++ b/styleguide/theme.css
@@ -0,0 +1,123 @@
+#styleguide {
+ float: left;
+ width: 80%;
+}
+
+#styleguide .section {
+ display: none;
+ margin-bottom: 2em;
+ -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+ -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+ box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+}
+
+#styleguide .result,
+#styleguide .comment {
+ padding: 1em;
+ border: 1px solid #ddd;
+}
+
+#styleguide .result {
+ position: relative;
+ border-top: none;
+}
+
+#styleguide .comment {
+ background-color: rgb(245, 245, 245);
+}
+
+#styleguide .section .comment code {
+ color: #3fbead;
+ font-family: Consolas, Monaco, 'Andale Mono', monospace;
+ font-size: 13px;
+}
+
+#styleguide .markup {
+ border: 1px solid #ddd;
+ border-top: none;
+}
+
+#styleguide code,
+#styleguide pre {
+ border: none;
+ font-family: Consolas, Monaco, 'Andale Mono', monospace;
+ font-size: 13px;
+ line-height: 20px;
+ direction: ltr;
+ text-align: left;
+ white-space: pre-wrap;
+ word-spacing: normal;
+ margin: 0;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+
+/* menu */
+#styleguide-menu {
+ width: calc(20% - 1em - 2px);
+ float: left;
+ margin-right: 1em;
+ padding: 1em 0;
+
+ border: 1px solid #ddd;
+ -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+ -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+ box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+}
+
+#styleguide-menu .submenu {
+ display: none;
+ background: rgba(0, 0, 0, 0.05);
+}
+
+#styleguide-menu .submenu.on{
+ display: block;
+}
+
+#styleguide-menu ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+#styleguide-menu li {
+ padding: 0;
+ margin: 0;
+}
+
+
+
+#styleguide-menu a {
+ display: block;
+ width: calc(100% - 2em + 2px);
+ padding: 0.3em 1em;
+ text-decoration: none;
+ color: rgba(0, 0, 0, 0.87);
+
+}
+
+#styleguide-menu ul ul a {
+ padding: 0.3em 1em 0.3em 2em;
+ width: calc(100% - 3em + 2px);
+}
+
+#styleguide-menu a:visited,
+#styleguide-menu a:hover,
+#styleguide-menu a:active {
+ display: block;
+ color: rgba(0, 0, 0, 0.87);
+}
+
+#styleguide-menu a:hover {
+ background-color: rgba(250, 255, 70, 0.3);
+}
+
+#styleguide-menu a.on {
+ background-color: rgba(0, 0, 0, 0.1);
+}
diff --git a/tasks/clean.js b/tasks/clean.js
new file mode 100644
index 0000000..5f08315
--- /dev/null
+++ b/tasks/clean.js
@@ -0,0 +1,13 @@
+module.exports = {
+ dist: {
+ files: [{
+ dot: true,
+ src: [
+ '.sass-cache',
+ '.tmp',
+ 'dist',
+ '!dist/.git*'
+ ]
+ }]
+ }
+};
diff --git a/tasks/concat.js b/tasks/concat.js
new file mode 100644
index 0000000..f97acac
--- /dev/null
+++ b/tasks/concat.js
@@ -0,0 +1,10 @@
+module.exports = {
+ dist: {
+ options: {},
+ files: {
+ 'dist/css/cartostyles.css': [
+ '.tmp/src/scss/**/*.css'
+ ]
+ }
+ }
+};
diff --git a/tasks/connect.js b/tasks/connect.js
new file mode 100644
index 0000000..1f986f1
--- /dev/null
+++ b/tasks/connect.js
@@ -0,0 +1,13 @@
+module.exports = {
+ server: {
+ options: {
+ port: 9003,
+ livereload: 35732,
+ open: true,
+ hostname: '0.0.0.0', // to be able to access the server not only from localhost
+ base: {
+ path: '.'
+ }
+ }
+ }
+};
diff --git a/tasks/copy.js b/tasks/copy.js
new file mode 100644
index 0000000..fd09f93
--- /dev/null
+++ b/tasks/copy.js
@@ -0,0 +1,7 @@
+module.exports = {
+ main: {
+ files: [
+ { expand: true, cwd: 'src/', src: 'fonts/**', dest: 'dist/' },
+ ]
+ }
+};
diff --git a/tasks/cssmin.js b/tasks/cssmin.js
new file mode 100644
index 0000000..d960ae6
--- /dev/null
+++ b/tasks/cssmin.js
@@ -0,0 +1,12 @@
+module.exports = {
+ dist: {
+ options: {
+ check: 'gzip'
+ },
+ files: {
+ 'dist/css/cartostyles.css': [
+ 'dist/css/cartostyles.css'
+ ]
+ }
+ }
+};
diff --git a/tasks/gh-pages.js b/tasks/gh-pages.js
new file mode 100644
index 0000000..f3a9470
--- /dev/null
+++ b/tasks/gh-pages.js
@@ -0,0 +1,6 @@
+module.exports = {
+ options: {
+ base: 'dist'
+ },
+ src: '**/*'
+};
diff --git a/tasks/sass.js b/tasks/sass.js
new file mode 100644
index 0000000..a6c6152
--- /dev/null
+++ b/tasks/sass.js
@@ -0,0 +1,16 @@
+module.exports = {
+ dist: {
+ options: {
+ sourceMap: false,
+ outputStyle: 'compressed'
+ },
+ files: [{
+ expand: true,
+ src: [
+ 'src/scss/**/*.scss'
+ ],
+ dest: '.tmp',
+ ext: '.css'
+ }]
+ }
+};
diff --git a/tasks/shell.js b/tasks/shell.js
new file mode 100644
index 0000000..299a370
--- /dev/null
+++ b/tasks/shell.js
@@ -0,0 +1,8 @@
+module.exports = {
+ style: {
+ command: 'styleguide'
+ },
+ generateFont: {
+ command: 'gulp'
+ }
+};
diff --git a/tasks/watch.js b/tasks/watch.js
new file mode 100644
index 0000000..d8ff37e
--- /dev/null
+++ b/tasks/watch.js
@@ -0,0 +1,16 @@
+module.exports = {
+ scss: {
+ files: [
+ 'src/scss/**/*.scss'
+ ],
+ tasks: [
+ 'sass',
+ 'concat',
+ 'cssmin'
+ ],
+ options: {
+ spawn: false,
+ livereload: 35732
+ }
+ }
+};
+
+
+ {{#each sections}}
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+ +
+ This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of suitcss and Medium’s CSS is actually pretty good.
+ +General rules
+ +-
+
- All new elements added in this repository should have included a 'CDB-' namespace. +
-
+ Don't create default styles for common elements (e.g.
input { padding: 10px 0 }). It will make more difficult edit styles for the future custom elements and the!importantuse will grow.
+ -
+ Avoid creating new classes with only one attribute (e.g.
.marginRight { margin-right: 10px }). It is impossible to manage the amount of cases we would like to cover.
+
+ +
Table of contents
+ +-
+
- + Components + + + +
- JavaScript +
- Structure sample +
- Precompilers +
- Colors +
- Z-Index +
- + Formatting + + + +
- Things to add to the guide +
+ +
+ Components
+ +Syntax: <ComponentName>[--modifierName|-descendentName]
+ ComponentName
+ +The component's name must be written in camel case.
+ +.MyComponent { /* … */ }<article class="MyComponent">
+ …
+</article>+ ComponentName--modifierName
+ +A component modifier is a class that modifies the presentation of the base component in some form.
+ +-
+
- Modifier names must be written in camel case and be separated from the component name by two hyphens. +
- + The class should be included in the HTML in addition to the base component class. +
/* Core button */
+.Btn { /* … */ }
+
+/* Default button style */
+.Btn--default { /* … */ }<article class="Btn Btn--default">
+ …
+</article>+ ComponentName-descendentName
+ +-
+
- A component descendent is a class that is attached to a descendent node of a component. +
- It's responsible for applying presentation directly to the descendent on behalf of a particular component. +
- + Descendent names must be written in camel case. +
<article class="Tweet">
+ <header class="Tweet-header">
+ <img class="Tweet-avatar" src="{{src}}" alt="{{alt}}">
+ …
+ </header>
+ <div class="Tweet-bodyText">
+ …
+ </div>
+</article>+ ComponentName.is-stateOfComponent
+ +Use is-stateName to reflect changes to a component's state.
-
+
- The state name must be camel case. +
- + Never style these classes directly: they should always be used as an adjoining class. +
This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).
+ +Right:
+ +.Tweet { /* … */ }
+.Tweet.is-expanded { /* … */ }
+
+<article class="Tweet is-expanded">
+ …
+</article>Wrong:
+ +.Tweet { /* … */ }
+.Tweet.expanded { /* … */ }<article class="Tweet expanded">
+ …
+</article>We should always rely on the same terminology to express state of a component: i.e.: a common term for is-active, is-expanded, is-selected, is-highlighted, ...
+ JavaScript
+ +Syntax: js-<targetName>
JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behaviour and complex functionality. It is not neccesarry to use them in every case, just think of them as a tool in your utility belt. If you are creating a class, which you dont intend to use for styling, but instead only as a selector in JavaScript, you should probably be adding the js- prefix. In practice this looks like this:
+ +<a href="/login" class="Btn Btn-primary js-login"></a>JavaScript-specific classes should not, under any circumstances, be styled.
+ ++ +
+ A word on (Pre)compilers
+ +Since we use Rails as a backend, we make use of Sprockets to make all the dirty work with stylesheets (and javascripts). Many of the stylesheets are constructed by simply writing require_directory —this is awesome, but it also kind of sucks.
Preferably we should use @import instead of require when possible.
+ http://pivotallabs.com/structure-your-sass-files-with-import/
When using require we should list the required files in the order they must be applied, as an added control to avoid undesired behaviours.
+ +Bad:
+ +/*
+*= require dashboard/header
+*= require dashboard/table
+*/
+Worse:
+ +/*
+*= require_tree dashboard
+*/
+Good:
+ +@import "dashboard/header";
+@import "dashboard/tables";
+Better:
+ +@import
+"dashboard/header",
+"dashboard/tables";
++ +
+ Structure sample
+ +
+.Btn {}
+
+ .Btn--m {}
+
+ .Btn--highlight {}
+
+ .Btn--green {}
+
+ .Btn.is-active {}
+
+.Menu {}
+
+ .Menu-item {}
+
+ .Menu-link {}
+
+.Header {}
+
+ .Navbar {}
+
+ .Navbar-header {}
+
+ .Navbar-brand {}
+
+ .Navbar-searchField {}
+
+ .Navbar-searchButton {}
+
+ .Navbar-menu {}
+
+ .Navbar-menuItem {}
+
+ .Navbar-menuLink {}
+
+.Dashboard {}
+
+ .Dashboard-header {}
+
+ .Dashboard-avatar {}
+
+ .Dashboard-title {}
+
+ .Dashboard-menu {}
+
+ .Dashboard-subHeader {}
+
+ .Dashboard-subMenu {}
+
+ .Dashboard-subMenuItem {}
+
+ .Dashboard-subMenuLink {}
+
+
+.Block {}
+
+ .Block-thumbnail {}
+
+ .Block-title {}
+
+ .Block-description {}
+
+ .Block-tags {}
+
+ .Block-status {}
+
+ .Block-footer {}
++ +
+ Colors
+ ++ colors.scss
+ +Syntax: $c<colorName>
+ Sample
+ +// Colors
+// --------------------------------------------------
+// Paragraphs
+$cTypography-headers: rgba(#333, 1);
+$cTypography-paragraphs: rgba(#666, 1);
+$cTypography-secondary: rgba(#999, 1);
+$cTypography-help: rgba(#CCC, 1);
+$cTypography-headersOverBlack: rgba(#FFF, 1);
+$cTypography-link: rgba(#0090D7, 1);
+$cTypography-linkHover: rgba(#62B4E3, 1);
+$cTypography-linkSelected: rgba(#333, 1);
+
+// Structure
+$cStructure-mainBkg: rgba(#FFF, 1);
+$cStructure-mainLine: rgba(#DDD, 1);
+$cStructure-grayBkg: rgba(#F9F9F9, 1);
+$cStructure-softLine: rgba(#EEE, 1);
+
+// Highlight
+$cHighlight-main: rgba(#0090D7, 1);
+$cHighlight-positive: rgba(#8FB83F, 1);
+$cHighlight-negative: rgba(#C74B43, 1);
+$cHighlight-alert: rgba(#C67B44, 1);Don't use named colors, try to use meaningful names.
+ ++ +
+ Z-Index
+ ++ z-index.scss
+ +// Z-Index Scale (private vars)
+// --------------------------------------------------
+@zIndex-1: 100;
+@zIndex-2: 200;
+@zIndex-3: 300;
+@zIndex-4: 400;
+@zIndex-5: 500;
+@zIndex-6: 600;
+@zIndex-7: 700;
+@zIndex-8: 800;
+@zIndex-9: 900;
+@zIndex-10: 1000;+ z-index file use
+ +// Z-Index Applications
+// --------------------------------------------------
+@zIndex-1--screenForeground: @zIndex-1;
+@zIndex-1--followUpVisibility: @zIndex-1;
+@zIndex-1--prlWelcome: @zIndex-1;
+@zIndex-1--appImageDropdown: @zIndex-1;
+@zIndex-1--surfaceUnder: @zIndex-1;
+@zIndex-1--blockGroup: @zIndex-1;
+
+(…)
+
+@zIndex-9--zoomOverlayTarget: @zIndex-9;
+@zIndex-9--navOverlayTouch: @zIndex-9;
+@zIndex-9--overlay: @zIndex-9;
+@zIndex-9--dialog: @zIndex-9;
+@zIndex-9--tooltip: @zIndex-9;
++ +
+ Formatting
+ +From: https://gist.github.com/fat/a47b882eb5f84293c4ed
+ +The following are some high level page formatting style rules.
+ + + ++ Property: value
+ +There should be a blank space between a property and a value:
+ +Right:
+ +.content-edit { background: red }Wrong:
+ +.content-edit {background:red}If you have to define an only one property, leave blank spaces between brackets.
+ + + ++ Spacing
+ +CSS rules should be comma seperated but live on new lines:
+ +Right:
+ +.content,
+.content-edit {
+ …
+}Wrong:
+ +.content, .content-edit {
+ …
+}CSS blocks should be seperated by a single new line. not two. not 0.
+ +Right:
+ +.content {
+ …
+}
+.content-edit {
+ …
+}Wrong:
+ +.content {
+ …
+}
+
+.content-edit {
+ …
+}+ +
+ Quotes
+ +Quotes are optional in CSS and LESS. We use double quotes as it is visually clearer that the string is not a selector or a style property.
+ +Right:
+ +background-image: url("/img/you.jpg");
+font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;Wrong:
+ +background-image: url(/img/you.jpg);
+font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;+ +
+ Colors
+ +When implementing feature styles, you should only be using color variables provided by colors.css.scss.
+ +When adding a color variable to colors.css.scss, using RGB and RGBA color units are preferred over hex, named, HSL, or HSLA values.
+ +Right:
+ +rgb(50, 50, 50);
+rgba(50, 50, 50, 0.2);Wrong:
+ +#FFF;
+#FFFFFF;
+white;
+hsl(120, 100%, 50%);
+hsla(120, 100%, 50%, 1);+ +
+ Things to add to the guide
+ +-
+
- Define a type scale (variables for font-sizes, weights, letter-spacing, line-heights, etc.). +
-
+
.u-prefixed class name for single purpose utility classes like .u-underline, .u-capitalize, etc. (not sure about this one)
+ - Don't use compass predefined functions, create a mixin in new
mixins.css.scssfile.
+ - No more clearfix or layout hacks, use flexbox: + + + +
+ +
+ CSSComb config
+ + "config": {
+
+ // Whether to add a semicolon after the last value/mixin.
+ "always-semicolon": true,
+
+ // Set indent for code inside blocks, including media queries and nested rules.
+ "block-indent": " ",
+
+ // Unify case of hexadecimal colors.
+ "color-case": "lower",
+
+ // Whether to expand hexadecimal colors or use shorthands.
+ "color-shorthand": true,
+
+ // Unify case of element selectors.
+ "element-case": "lower",
+
+ // Add/remove line break at EOF.
+ "eof-newline": true,
+
+ // Add/remove leading zero in dimensions.
+ "leading-zero": false,
+
+ // Unify quotes style.
+ "quotes": "single",
+
+ // Remove all rulesets that contain nothing but spaces.
+ "remove-empty-rulesets": true,
+
+ // Set space after `:` in declarations.
+ "space-after-colon": " ",
+
+ // Set space after combinator (for example, in selectors like `p > a`).
+ "space-after-combinator": " ",
+
+ // Set space after `{`.
+ "space-after-opening-brace": "\n",
+
+ // Set space after selector delimiter.
+ "space-after-selector-delimiter": "\n",
+
+ // Set space before `}`.
+ "space-before-closing-brace": "\n",
+
+ // Set space before `:` in declarations.
+ "space-before-colon": "",
+
+ // Set space before combinator (for example, in selectors like `p > a`).
+ "space-before-combinator": " ",
+
+ // Set space before `{`.
+ "space-before-opening-brace": " ",
+
+ // Set space before selector delimiter.
+ "space-before-selector-delimiter": "",
+
+ // Set space between declarations (i.e. `color: tomato`).
+ "space-between-declarations": "\n",
+
+ // Whether to trim trailing spaces.
+ "strip-spaces": true,
+
+ // Whether to remove units in zero-valued dimensions.
+ "unitless-zero": true,
+
+ // Whether to align prefixes in properties and values.
+ "vendor-prefix-align": true,
+
+ // Sort properties in particular order.
+ "sort-order": [
+ "position",
+ "top",
+ "right",
+ "bottom",
+ "left",
+ "z-index",
+ "display",
+ "float",
+ "width",
+ "min-width",
+ "max-width",
+ "height",
+ "min-height",
+ "max-height",
+ "-webkit-box-sizing",
+ "-moz-box-sizing",
+ "box-sizing",
+ "-webkit-appearance",
+ "-moz-appearance",
+ "appearance",
+ "padding",
+ "padding-top",
+ "padding-right",
+ "padding-bottom",
+ "padding-left",
+ "margin",
+ "margin-top",
+ "margin-right",
+ "margin-bottom",
+ "margin-left",
+ "overflow",
+ "overflow-x",
+ "overflow-y",
+ "-webkit-overflow-scrolling",
+ "-ms-overflow-x",
+ "-ms-overflow-y",
+ "-ms-overflow-style",
+ "clip",
+ "clear",
+ "src",
+ "font",
+ "font-family",
+ "font-size",
+ "font-weight",
+ "font-style",
+ "font-variant",
+ "font-size-adjust",
+ "font-stretch",
+ "font-effect",
+ "font-emphasize",
+ "font-emphasize-position",
+ "font-emphasize-style",
+ "font-smooth",
+ "-webkit-hyphens",
+ "-moz-hyphens",
+ "hyphens",
+ "line-height",
+ "color",
+ "text-align",
+ "-webkit-text-align-last",
+ "-moz-text-align-last",
+ "-ms-text-align-last",
+ "text-align-last",
+ "text-emphasis",
+ "text-emphasis-color",
+ "text-emphasis-style",
+ "text-emphasis-position",
+ "text-decoration",
+ "text-underline-position",
+ "-webkit-text-decoration-style",
+ "-moz-text-decoration-style",
+ "text-decoration-style",
+ "-moz-text-decoration-color",
+ "text-decoration-color",
+ "-moz-text-decoration-line",
+ "text-decoration-line",
+ "text-indent",
+ "-ms-text-justify",
+ "text-justify",
+ "text-outline",
+ "-ms-text-overflow",
+ "text-overflow",
+ "text-overflow-ellipsis",
+ "text-overflow-mode",
+ "text-shadow",
+ "text-transform",
+ "text-wrap",
+ "-webkit-text-size-adjust",
+ "-moz-text-size-adjust",
+ "-ms-text-size-adjust",
+ "text-size-adjust",
+ "letter-spacing",
+ "-ms-word-break",
+ "word-break",
+ "word-spacing",
+ "-ms-word-wrap",
+ "word-wrap",
+ "-moz-tab-size",
+ "-o-tab-size",
+ "tab-size",
+ "white-space",
+ "vertical-align",
+ "list-style",
+ "list-style-position",
+ "list-style-type",
+ "list-style-image",
+ "pointer-events",
+ "-webkit-touch-action",
+ "-ms-touch-action",
+ "touch-action",
+ "cursor",
+ "visibility",
+ "zoom",
+ "flex-direction",
+ "flex-order",
+ "flex-pack",
+ "flex-align",
+ "table-layout",
+ "empty-cells",
+ "caption-side",
+ "border-spacing",
+ "border-collapse",
+ "content",
+ "quotes",
+ "counter-reset",
+ "counter-increment",
+ "resize",
+ "-webkit-user-select",
+ "-moz-user-select",
+ "-ms-user-select",
+ "user-select",
+ "nav-index",
+ "nav-up",
+ "nav-right",
+ "nav-down",
+ "nav-left",
+ "background",
+ "background-color",
+ "background-image",
+ "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+ "filter:progid:DXImageTransform.Microsoft.gradient",
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+ "filter",
+ "background-repeat",
+ "background-attachment",
+ "background-position",
+ "background-position-x",
+ "-ms-background-position-x",
+ "background-position-y",
+ "-ms-background-position-y",
+ "-webkit-background-clip",
+ "-moz-background-clip",
+ "background-clip",
+ "background-origin",
+ "-webkit-background-size",
+ "-moz-background-size",
+ "-o-background-size",
+ "background-size",
+ "border",
+ "border-width",
+ "border-style",
+ "border-color",
+ "border-top",
+ "border-top-width",
+ "border-top-style",
+ "border-top-color",
+ "border-right",
+ "border-right-width",
+ "border-right-style",
+ "border-right-color",
+ "border-bottom",
+ "border-bottom-width",
+ "border-bottom-style",
+ "border-bottom-color",
+ "border-left",
+ "border-left-width",
+ "border-left-style",
+ "border-left-color",
+ "-webkit-box-decoration-break",
+ "box-decoration-break",
+ "-webkit-border-radius",
+ "-moz-border-radius",
+ "border-radius",
+ "-webkit-border-top-left-radius",
+ "-moz-border-radius-topleft",
+ "border-top-left-radius",
+ "-webkit-border-top-right-radius",
+ "-moz-border-radius-topright",
+ "border-top-right-radius",
+ "-webkit-border-bottom-right-radius",
+ "-moz-border-radius-bottomright",
+ "border-bottom-right-radius",
+ "-webkit-border-bottom-left-radius",
+ "-moz-border-radius-bottomleft",
+ "border-bottom-left-radius",
+ "-webkit-border-image",
+ "-moz-border-image",
+ "-o-border-image",
+ "border-image",
+ "-webkit-border-image-source",
+ "-moz-border-image-source",
+ "-o-border-image-source",
+ "border-image-source",
+ "-webkit-border-image-slice",
+ "-moz-border-image-slice",
+ "-o-border-image-slice",
+ "border-image-slice",
+ "-webkit-border-image-width",
+ "-moz-border-image-width",
+ "-o-border-image-width",
+ "border-image-width",
+ "-webkit-border-image-outset",
+ "-moz-border-image-outset",
+ "-o-border-image-outset",
+ "border-image-outset",
+ "-webkit-border-image-repeat",
+ "-moz-border-image-repeat",
+ "-o-border-image-repeat",
+ "border-image-repeat",
+ "outline",
+ "outline-width",
+ "outline-style",
+ "outline-color",
+ "outline-offset",
+ "-webkit-box-shadow",
+ "-moz-box-shadow",
+ "box-shadow",
+ "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+ "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+ "opacity",
+ "-ms-interpolation-mode",
+ "-webkit-transition",
+ "-moz-transition",
+ "-ms-transition",
+ "-o-transition",
+ "transition",
+ "-webkit-transition-delay",
+ "-moz-transition-delay",
+ "-ms-transition-delay",
+ "-o-transition-delay",
+ "transition-delay",
+ "-webkit-transition-timing-function",
+ "-moz-transition-timing-function",
+ "-ms-transition-timing-function",
+ "-o-transition-timing-function",
+ "transition-timing-function",
+ "-webkit-transition-duration",
+ "-moz-transition-duration",
+ "-ms-transition-duration",
+ "-o-transition-duration",
+ "transition-duration",
+ "-webkit-transition-property",
+ "-moz-transition-property",
+ "-ms-transition-property",
+ "-o-transition-property",
+ "transition-property",
+ "-webkit-transform",
+ "-moz-transform",
+ "-ms-transform",
+ "-o-transform",
+ "transform",
+ "-webkit-transform-origin",
+ "-moz-transform-origin",
+ "-ms-transform-origin",
+ "-o-transform-origin",
+ "transform-origin",
+ "-webkit-animation",
+ "-moz-animation",
+ "-ms-animation",
+ "-o-animation",
+ "animation",
+ "-webkit-animation-name",
+ "-moz-animation-name",
+ "-ms-animation-name",
+ "-o-animation-name",
+ "animation-name",
+ "-webkit-animation-duration",
+ "-moz-animation-duration",
+ "-ms-animation-duration",
+ "-o-animation-duration",
+ "animation-duration",
+ "-webkit-animation-play-state",
+ "-moz-animation-play-state",
+ "-ms-animation-play-state",
+ "-o-animation-play-state",
+ "animation-play-state",
+ "-webkit-animation-timing-function",
+ "-moz-animation-timing-function",
+ "-ms-animation-timing-function",
+ "-o-animation-timing-function",
+ "animation-timing-function",
+ "-webkit-animation-delay",
+ "-moz-animation-delay",
+ "-ms-animation-delay",
+ "-o-animation-delay",
+ "animation-delay",
+ "-webkit-animation-iteration-count",
+ "-moz-animation-iteration-count",
+ "-ms-animation-iteration-count",
+ "-o-animation-iteration-count",
+ "animation-iteration-count",
+ "-webkit-animation-direction",
+ "-moz-animation-direction",
+ "-ms-animation-direction",
+ "-o-animation-direction",
+ "animation-direction",
+ "-webkit-text-orientation",
+ "-moz-text-orientation",
+ "-o-text-orientation",
+ "text-orientation",
+ "-ms-writing-mode",
+ "text-rendering",
+ "-webkit-font-smoothing",
+ "-moz-osx-font-smoothing",
+ "font-smoothing",
+ "direction",
+ "unicode-bidi"
+ ]
+ }
+
+
+
+ {{/each}}
+
+
+
+ {{#if code}}
+ {{section}}{{#if heading}}/{{heading}}{{/if}}
+ {{{comment}}} +
+ {{{code}}}
+
+ {{/if}}
+
+ {{#if markup}}
+
+
+ {{/if}}
+
+
+{{{markup}}}
+
+
Basics
+Important notes about this styleguide
+