-
-
-
-
-
- -
-
-
-
-
-
-
-
- - - -
-
-
- - - - - - - - - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-*/
-
-@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
deleted file mode 100644
index 87fb7b7..0000000
--- a/src/scss/cdb-components/colors.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-// 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
deleted file mode 100644
index 8774a75..0000000
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-// 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
deleted file mode 100644
index 5258392..0000000
--- a/src/scss/cdb-components/forms/dropdowns.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-// 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
deleted file mode 100644
index a7a8e01..0000000
--- a/src/scss/cdb-components/forms/inputs.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-// 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
deleted file mode 100644
index 34259cb..0000000
--- a/src/scss/cdb-components/forms/legends.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-// 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
deleted file mode 100644
index 721032d..0000000
--- a/src/scss/cdb-components/forms/option-input.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-// 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 deleted file mode 100644 index badfed2..0000000 --- a/src/scss/cdb-components/forms/radio.scss +++ /dev/null @@ -1,93 +0,0 @@ - -// 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
deleted file mode 100644
index 08b1d35..0000000
--- a/src/scss/cdb-components/forms/selects.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-// 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 deleted file mode 100644 index 9b76b2b..0000000 --- a/src/scss/cdb-components/forms/sliders.scss +++ /dev/null @@ -1,143 +0,0 @@ -// 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 deleted file mode 100644 index d0b5f34..0000000 --- a/src/scss/cdb-components/forms/tabsForms.scss +++ /dev/null @@ -1,101 +0,0 @@ -// 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
deleted file mode 100644
index d37bb2c..0000000
--- a/src/scss/cdb-components/forms/textarea.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-// 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
deleted file mode 100644
index c41ac45..0000000
--- a/src/scss/cdb-components/forms/toggle.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-// 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
deleted file mode 100644
index 497bcd7..0000000
--- a/src/scss/cdb-components/headers.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-// 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 deleted file mode 100644 index 57b2a9c..0000000 --- a/src/scss/cdb-components/lists.scss +++ /dev/null @@ -1,39 +0,0 @@ -// 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
deleted file mode 100644
index 4e6787d..0000000
--- a/src/scss/cdb-components/menu.scss
+++ /dev/null
@@ -1,232 +0,0 @@
-// 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
deleted file mode 100644
index 6fa4b2b..0000000
--- a/src/scss/cdb-components/shapes/add.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-/* 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
deleted file mode 100644
index 295cd40..0000000
--- a/src/scss/cdb-components/shapes/arrow.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-/* 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
deleted file mode 100644
index cf2b1f1..0000000
--- a/src/scss/cdb-components/shapes/check-circle.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-/* 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
deleted file mode 100644
index 473f7dc..0000000
--- a/src/scss/cdb-components/shapes/close.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-/* 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
deleted file mode 100644
index 8c3bdeb..0000000
--- a/src/scss/cdb-components/shapes/dash.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-/* 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
deleted file mode 100644
index 71930a1..0000000
--- a/src/scss/cdb-components/shapes/dataset.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-/* 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
deleted file mode 100644
index 54e61b7..0000000
--- a/src/scss/cdb-components/shapes/dots.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// 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
deleted file mode 100644
index 010a296..0000000
--- a/src/scss/cdb-components/shapes/error-circle.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-/* 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
deleted file mode 100644
index d5d2bc4..0000000
--- a/src/scss/cdb-components/shapes/hamburguer.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-/* 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
deleted file mode 100644
index bec21d4..0000000
--- a/src/scss/cdb-components/shapes/magnify.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-/* 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
deleted file mode 100644
index 622ad77..0000000
--- a/src/scss/cdb-components/shapes/move.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-/* 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
deleted file mode 100644
index 9c9517b..0000000
--- a/src/scss/cdb-components/shapes/paragraph.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-/* 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
deleted file mode 100644
index effdd59..0000000
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-/* 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
deleted file mode 100644
index 90381da..0000000
--- a/src/scss/cdb-components/shapes/toogle-arrow.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-/* 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
deleted file mode 100644
index 1a6decc..0000000
--- a/src/scss/cdb-components/shapes/type.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-/* 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
deleted file mode 100644
index c8a74ee..0000000
--- a/src/scss/cdb-components/tags.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-// 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
deleted file mode 100644
index 1487433..0000000
--- a/src/scss/cdb-components/typography.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-// 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 deleted file mode 100644 index f417fee..0000000 --- a/src/scss/cdb-icon-font.scss +++ /dev/null @@ -1,1277 +0,0 @@ -// 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
deleted file mode 100644
index d393024..0000000
--- a/src/scss/cdb-utilities/_mixins.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-// 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
deleted file mode 100644
index aaabb14..0000000
--- a/src/scss/cdb-utilities/defaults.css.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// 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
deleted file mode 100644
index 8c8bf83..0000000
--- a/src/scss/cdb-utilities/fonts.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-// 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
deleted file mode 100644
index c8d83d6..0000000
--- a/src/scss/cdb-utilities/helpers.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-// 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
deleted file mode 100644
index 7bd6216..0000000
--- a/src/scss/cdb-utilities/vendor/normalize.scss
+++ /dev/null
@@ -1,608 +0,0 @@
-/* ==========================================================================
- 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
deleted file mode 100644
index 06fe9d1..0000000
--- a/src/scss/cdb-utilities/vendor/reset.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-/* 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
deleted file mode 100644
index 394a701..0000000
--- a/src/scss/cdb-variables/_colors.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// 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
deleted file mode 100644
index ebb911a..0000000
--- a/src/scss/cdb-variables/_sizes.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// 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
deleted file mode 100644
index f892cf2..0000000
--- a/styleguide/_template.html
+++ /dev/null
@@ -1,978 +0,0 @@
-
-
-
-
-{{> theme}}
-{{> highlight}}
-{{> jquery}}
-
-
-
-
-
-rArrow
-
-
diff --git a/styleguide/index.html b/styleguide/index.html
index 60bd84c..42ffa64 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -76,6 +76,11 @@
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
}
+.styleguide-list {
+ list-style: disc;
+ list-style-position: inside;
+}
+
#styleguide-menu .submenu {
display: none;
background: rgba(0, 0, 0, 0.05);
@@ -230,7 +235,7 @@ github.com style (c) Vasily Polovnyov
-
-
- {{#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}}}
-
-
+
@@ -11773,8 +10781,8 @@ hsla(120, 100%, 50%, 1);
@@ -11831,118 +10839,18 @@ hsla(120, 100%, 50%, 1);
<span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
- <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+ <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
<span class="u-iBlock CDB-Checkbox-face"></span>
</div>
-
- - Basics @@ -10118,8 +10106,6 @@ return jQuery; Boxes
-
@@ -10142,14 +10128,12 @@ return jQuery;
Forms
- Checkbox -
- Color bar
- Dropdowns
- Inputs
- Labels
- Option input
- Radio
- Selects -
- Sliders
- TabsForms
- Textareas
- Toggle @@ -10217,901 +10201,41 @@ return jQuery;
- 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.
+ - 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. - - Components - - - -
- JavaScript -
- Structure sample -
- Precompilers -
- Colors -
- Z-Index -
- - Formatting - - - -
- Things to add to the guide -
- 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. -
- 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. -
- The state name must be camel case. -
- - Never style these classes directly: they should always be used as an adjoining class. -
- 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: - - - -
-
-
+
-
-
+
-
-
+
- @@ -11123,13 +10247,13 @@ hsla(120, 100%, 50%, 1);
-
- --- ----
Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows
------ - - --
- -
- --- ----
Finished importing populated_places_2
-
- -
- - ----
Geocoding populated_places_2 (28%)
---- --
- -
- --- ----
Finished importing populated_places_2
-
- -
- --- ----
Error in query. Data might be outdated
------ - - --
-
--Basics
-Important notes about this styleguide
+Basics
+Important notes about this styleguide
-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.
+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
+General rules
--
-
-
+
- -Table of contents
- --
-
- -- 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.
- --
-
- -/* Core button */ -.Btn { /* … */ } - -/* Default button style */ -.Btn--default { /* … */ }
- -<article class="Btn Btn--default"> - … -</article>
- ComponentName-descendentName
- --
-
- -<article class="Tweet"> - <header class="Tweet-header"> - <img class="Tweet-avatar" src="" alt=""> - … - </header> - <div class="Tweet-bodyText"> - … - </div> -</article>
- ComponentName.is-stateOfComponent
- -Use
- -is-stateNameto reflect changes to a component's state.-
-
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
- -@importinstead ofrequirewhen 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
- --
-
- -- 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" - ] - } --Avatars/List
- +Avatars/List
+<ul class="CDB-AvatarList"> <li class="CDB-AvatarList-item"> - <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia"> + <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia"> </li> <li class="CDB-AvatarList-item"> - <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia"> + <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia"> </li> <li class="CDB-AvatarList-item"> - <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia"> + <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia"> </li> <li class="CDB-AvatarList-itemMore"> <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button> @@ -11142,8 +10266,8 @@ hsla(120, 100%, 50%, 1);--Boxes/Dropdown
- +Boxes/Dropdown
+@@ -11156,279 +10280,13 @@ hsla(120, 100%, 50%, 1);- ---- -Boxes/Info Boxes
- --- ---ABOUT PREVIEW MODE
-He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear
- -
-
-
---ABOUT PREVIEW MODE
-He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear
- --- --<div class="CDB-InfoBox"> - <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2> - <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p> - <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p> -</div> -<br> -<br> -<br> -<div class="CDB-InfoBox is-alert"> - <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2> - <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p> - <ul class="CDB-InfoBox-footer"> - <li class="CDB-InfoBox-footerItem"> - <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p> - </li> - <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right"> - <button class="CDB-Button CDB-Button--secondary CDB-Button--small"> - <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> - </button> - </li> - </ul> -</div> --- --- -Boxes/Loader
- --- ----
-
-
-
-
-
----
-
-
-
-
-
-
-
----
-
---<div class="CDB-BoxLoader"> - <ul class="CDB-BoxLoader-inner"> - <li class="CDB-BoxLoader-item"> - <div class="CDB-Shape u-rSpace--m"> - <div class="CDB-Shape-CircleItem is-green is-medium"> - <div class="CDB-Shape-tick is-medium is-green"></div> - </div> - </div> - <div class="CDB-BoxLoader-info"> - <p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p> - </div> - <div class="CDB-BoxLoader-actions"> - <div class="CDB-Shape"> - <div class="CDB-Shape-threePoints is-small is-blue"> - <div class="CDB-Shape-threePointsItem"></div> - <div class="CDB-Shape-threePointsItem"></div> - <div class="CDB-Shape-threePointsItem"></div> - </div> - </div> - </div> - </li> - </ul> -</div> -<br> -<br> -<br> -<br> -<br> -<div class="CDB-BoxLoader"> - <ul class="CDB-BoxLoader-inner"> - <li class="CDB-BoxLoader-item"> - <div class="CDB-Shape u-rSpace--m"> - <div class="CDB-Shape-CircleItem is-green is-medium"> - <div class="CDB-Shape-tick is-medium is-green"></div> - </div> - </div> - <div class="CDB-BoxLoader-info"> - <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p> - </div> - </li> - <li class="CDB-BoxLoader-item is-working"> - <div class="CDB-LoaderIcon u-rSpace--m"> - <div class="CDB-LoaderIcon-item"></div> - </div> - <div class="CDB-BoxLoader-info"> - <p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p> - </div> - <div class="CDB-BoxLoader-actions"> - <div class="CDB-Shape"> - <div class="CDB-Shape-close is-blue is-large"></div> - </div> - </div> - </li> - </ul> - <ul class="CDB-BoxLoader-inner"> - <li class="CDB-BoxLoader-item"> - <div class="CDB-Shape u-rSpace--m"> - <div class="CDB-Shape-CircleItem is-green is-medium"> - <div class="CDB-Shape-tick is-medium is-green"></div> - </div> - </div> - <div class="CDB-BoxLoader-info"> - <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p> - </div> - </li> - </ul> -</div> -<br> -<br> -<br> -<br> -<br> -<div class="CDB-BoxLoader"> - <ul class="CDB-BoxLoader-inner"> - <li class="CDB-BoxLoader-item"> - <div class="CDB-Shape u-rSpace--m"> - <div class="CDB-Shape-CircleItem is-red"> - <div class="CDB-Shape-close is-medium is-red"></div> - </div> - </div> - <div class="CDB-BoxLoader-info"> - <p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p> - </div> - <div class="CDB-BoxLoader-actions"> - <div class="CDB-Shape"> - <div class="CDB-Shape-threePoints is-small is-blue"> - <div class="CDB-Shape-threePointsItem"></div> - <div class="CDB-Shape-threePointsItem"></div> - <div class="CDB-Shape-threePointsItem"></div> - </div> - </div> - </div> - </li> - </ul> -</div> ---Buttons/Primary
-Layout Component: -[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
+Buttons/Primary
+Layout Component: +[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
@@ -11465,6 +10323,73 @@ hsla(120, 100%, 50%, 1);
+ + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + +
+
+
+<br> <br> +<button class="CDB-Button CDB-Button--alert CDB-Button--big"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> +</button> + + +<button class="CDB-Button CDB-Button--alert"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--alert is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--alert CDB-Button--small"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--alert CDB-Button--icon"> + <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i> +</button> + + +<br> +<br> +<br> + +<button class="CDB-Button CDB-Button--error CDB-Button--big"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> +</button> + + +<button class="CDB-Button CDB-Button--error"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--error is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--error CDB-Button--small"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span> +</button> + +<button class="CDB-Button CDB-Button--error CDB-Button--icon"> + <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i> +</button> + +<br> +<br> +<br> + <div style="background: #2E3C43; padding: 20px;"> <button class="CDB-Button CDB-Button--primary CDB-Button--big"> @@ -11571,8 +10563,8 @@ hsla(120, 100%, 50%, 1);<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> </button> + <button class="CDB-Button CDB-Button--secondary CDB-Button--white"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> + </button> + + <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled"> + <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> + </button> + <button class="CDB-Button CDB-Button--secondary is-disabled"> <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span> </button> @@ -11693,8 +10701,8 @@ hsla(120, 100%, 50%, 1);-Buttons/Secondary
- +Buttons/Secondary
+@@ -11617,6 +10609,14 @@ hsla(120, 100%, 50%, 1);SAVE + + + + @@ -11674,6 +10674,14 @@ hsla(120, 100%, 50%, 1);
-
Colors/line
- +Colors/line
+
@@ -11717,8 +10725,8 @@ hsla(120, 100%, 50%, 1);
-
Colors/other
- +Colors/other
+
@@ -11745,27 +10753,27 @@ hsla(120, 100%, 50%, 1);
-
Colors/structure
- +Colors/structure
+
-
-
-
-
-
-
+
+
+
+
+
+
-<div class="box Color-MainDark"></div>
-<div class="box Color-SecondaryDark"></div>
-<div class="box Color-Blue"></div>
-<div class="box Color-White"></div>
-<div class="box Color-SecondaryBackground"></div>
-<div class="box Color-ThirdBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
-
Colors/typography
- +Colors/typography
+
@@ -11801,8 +10809,8 @@ hsla(120, 100%, 50%, 1);
-
Forms/Checkbox
- +Forms/Checkbox
+
@@ -11815,7 +10823,7 @@ hsla(120, 100%, 50%, 1);
-
+
-
-
-
-
- Forms/Color bar
- -
-
- -
- -
- -
- -
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-<ul class="CDB-ColorBarContainer">
- <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
-</ul>
-
-<br>
-
-<ul class="CDB-ColorBarContainer">
- <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
-</ul>
-
-<br>
-
-<ul class="CDB-ColorBarContainer">
- <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #BD10E0;"></li>
- <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #F15743;"></li>
-</ul>
-
-<br>
-
-<ul class="CDB-ColorBarContainer">
- <li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
-</ul>
-
-<br>
-
-<ul class="CDB-ColorBarContainer">
- <li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
-</ul>
-
-
-
Forms/Dropdowns
- +Forms/Dropdowns
+
@@ -12155,8 +11063,8 @@ hsla(120, 100%, 50%, 1);
-
Forms/Inputs
- +Forms/Inputs
+
@@ -12177,8 +11085,8 @@ hsla(120, 100%, 50%, 1);
-
Forms/Labels
- +Forms/Labels
+
@@ -12343,8 +11251,8 @@ hsla(120, 100%, 50%, 1);
-
Forms/Option input
- +Forms/Option input
+
@@ -12384,6 +11292,25 @@ hsla(120, 100%, 50%, 1);
+
+
+
+-
+
- + + +
- + + + +
- + + +
+
-
Forms/Radio
- +Forms/Radio
+
@@ -12541,8 +11487,8 @@ hsla(120, 100%, 50%, 1);
-
Forms/Selects
- +Forms/Selects
+
@@ -12579,6 +11525,10 @@ hsla(120, 100%, 50%, 1);
DejaVu Sans
+
null
++
46,594
+
-
-
-
-
- Forms/Sliders
- -
-
-
-
-
-
-
-<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range">
-
-
-
Forms/TabsForms
- +Forms/TabsForms
+
@@ -12799,8 +11735,8 @@ hsla(120, 100%, 50%, 1);
-
Forms/Textareas
- +Forms/Textareas
+
@@ -12821,26 +11757,52 @@ hsla(120, 100%, 50%, 1);
-
Forms/Toggle
- +Forms/Toggle
+
-
@@ -12849,8 +11811,8 @@ hsla(120, 100%, 50%, 1);
-
-
-
-
+
+ +
+
+
+
+
+
+
+
+
++ +
+
+
+
+
+
+
-<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
- <label class="u-iBlock">TOOLS</label>
- <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
- <span class="u-iBlock CDB-ToggleFace"></span>
- <label class="u-iBlock">SQL</label>
+<div class="Toggle">
+ <div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
+ <label class="u-iBlock">TOOLS</label>
+ <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
+ <span class="u-iBlock CDB-ToggleFace"></span>
+ <label class="u-iBlock">SQL</label>
+ </div>
+</div>
+
+<br>
+
+<div class="Toggle">
+ <div class="CDB-Text CDB-Size-small is-semibold is-disabled u-rSpace--xl">
+ <label class="u-iBlock">TOOLS</label>
+ <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis" disabled>
+ <span class="u-iBlock CDB-ToggleFace"></span>
+ <label class="u-iBlock">SQL</label>
+ </div>
</div>
-
Headers
- +Headers
+
@@ -13181,8 +12143,8 @@ hsla(120, 100%, 50%, 1);
-
Info Tooltip
- +Info Tooltip
+
@@ -13293,8 +12255,8 @@ hsla(120, 100%, 50%, 1);
-
Lists/Lists Decorations
- +Lists/Lists Decorations
+
@@ -13311,85 +12273,129 @@ hsla(120, 100%, 50%, 1);
-
Loader/circle
- +Loader/circle
+
-
@@ -15411,8 +14483,8 @@ hsla(120, 100%, 50%, 1);
+
+
</div>
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
+ <h4 class="Text Size-small">downloadCircle</h4>
+ </div>
+
+
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
+ <h4 class="Text Size-small">pencilMenu</h4>
+ </div>
+
+
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
+ <h4 class="Text Size-small">mobile</h4>
+ </div>
+
+
<div class="box">
<i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
<h4 class="Text Size-small">wizard</h4>
</div>
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
+ <h4 class="Text Size-small">undo</h4>
+ </div>
+
+
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
+ <h4 class="Text Size-small">redo</h4>
+ </div>
+
+
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
+ <h4 class="Text Size-small">lArrowLight</h4>
+ </div>
+
+
+ <div class="box">
+ <i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
+ <h4 class="Text Size-small">hide</h4>
+ </div>
+
+
<div class="box">
<i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
<h4 class="Text Size-small">info</h4>
diff --git a/styleguide/theme.css b/styleguide/theme.css
deleted file mode 100644
index c84c1f2..0000000
--- a/styleguide/theme.css
+++ /dev/null
@@ -1,123 +0,0 @@
-#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
deleted file mode 100644
index 5f08315..0000000
--- a/tasks/clean.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
- dist: {
- files: [{
- dot: true,
- src: [
- '.sass-cache',
- '.tmp',
- 'dist',
- '!dist/.git*'
- ]
- }]
- }
-};
diff --git a/tasks/concat.js b/tasks/concat.js
deleted file mode 100644
index f97acac..0000000
--- a/tasks/concat.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
- dist: {
- options: {},
- files: {
- 'dist/css/cartostyles.css': [
- '.tmp/src/scss/**/*.css'
- ]
- }
- }
-};
diff --git a/tasks/connect.js b/tasks/connect.js
deleted file mode 100644
index 1f986f1..0000000
--- a/tasks/connect.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index fd09f93..0000000
--- a/tasks/copy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
- main: {
- files: [
- { expand: true, cwd: 'src/', src: 'fonts/**', dest: 'dist/' },
- ]
- }
-};
diff --git a/tasks/cssmin.js b/tasks/cssmin.js
deleted file mode 100644
index d960ae6..0000000
--- a/tasks/cssmin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index f3a9470..0000000
--- a/tasks/gh-pages.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- options: {
- base: 'dist'
- },
- src: '**/*'
-};
diff --git a/tasks/sass.js b/tasks/sass.js
deleted file mode 100644
index a6c6152..0000000
--- a/tasks/sass.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 299a370..0000000
--- a/tasks/shell.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
- style: {
- command: 'styleguide'
- },
- generateFont: {
- command: 'gulp'
- }
-};
diff --git a/tasks/watch.js b/tasks/watch.js
deleted file mode 100644
index d8ff37e..0000000
--- a/tasks/watch.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
- scss: {
- files: [
- 'src/scss/**/*.scss'
- ],
- tasks: [
- 'sass',
- 'concat',
- 'cssmin'
- ],
- options: {
- spawn: false,
- livereload: 35732
- }
- }
-};
-
-
-
-
+
+
+
+
+
+
+
+
+
-
@@ -13603,8 +12673,8 @@ hsla(120, 100%, 50%, 1);
-
-
-
-
+
+
+
+
+
-
@@ -13397,8 +12403,8 @@ hsla(120, 100%, 50%, 1);
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-<div style="padding: 20px;">
- <div class="CDB-LoaderIcon">
- <div class="CDB-LoaderIcon-item">
- <span class="CDB-LoaderIcon-itemClose"></span>
- <span class="CDB-LoaderIcon-itemCircle"></span>
- </div>
- </div>
-</div>
+<div style="padding: 20px;">
+ <div class="CDB-LoaderIcon is-blue">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
-<div style="padding: 20px; background: #F9F9F9;">
- <div class="CDB-LoaderIcon is-grey">
- <div class="CDB-LoaderIcon-item">
- <span class="CDB-LoaderIcon-itemClose"></span>
- <span class="CDB-LoaderIcon-itemCircle"></span>
- </div>
- </div>
-</div>
+ <div class="CDB-LoaderIcon is-dark">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+ <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+</div>
-<div style="padding: 20px; background: #2E3C43;">
- <div class="CDB-LoaderIcon is-dark">
- <div class="CDB-LoaderIcon-item">
- <span class="CDB-LoaderIcon-itemClose"></span>
- <span class="CDB-LoaderIcon-itemCircle"></span>
- </div>
- </div>
-</div>
+<div style="padding: 20px; background: #F9F9F9;">
+ <div class="CDB-LoaderIcon is-dark">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+ <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+</div>
-<div style="padding: 20px; background: #E27D61;">
- <div class="CDB-LoaderIcon is-bg">
- <div class="CDB-LoaderIcon-item">
- <span class="CDB-LoaderIcon-itemClose" style="background: #E27D61"></span>
- <span class="CDB-LoaderIcon-itemCircle" style="background: #E27D61"></span>
- </div>
- </div>
-</div>
+<div style="padding: 20px; background: #2E3C43;">
+ <div class="CDB-LoaderIcon">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+ <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+</div>
+
+<div style="padding: 20px; background: #E27D61;">
+ <div class="CDB-LoaderIcon">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+ <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+ <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+ <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+ </svg>
+ </div>
+</div>
-
Loader/principal
-This is the generic loader for widgets, maps, components, ...
+Loader/principal
+This is the generic loader for widgets, maps, components, ...
@@ -13415,8 +12421,8 @@ hsla(120, 100%, 50%, 1);
@@ -13596,6 +12634,38 @@ hsla(120, 100%, 50%, 1);
</li>
</ul>
</nav>
+
+
+<br><br>
+<br><br>
+
+<div style="background: #2E3C43; height: 100px; padding: 20px;">
+ <nav class="CDB-NavMenu is-dark">
+ <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+ <li class="CDB-NavMenu-item">
+ <button class="CDB-NavMenu-link">DATA</button>
+ </li>
+ <li class="CDB-NavMenu-item">
+ <button class="CDB-NavMenu-link">STYLE</button>
+ </li>
+ <li class="CDB-NavMenu-item is-selected">
+ <button class="CDB-NavMenu-link">POP-UP</button>
+ </li>
+ <li class="CDB-NavMenu-item">
+ <button class="CDB-NavMenu-link">LEGEND</button>
+ </li>
+ </ul>
+
+ <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
+ <li class="CDB-NavSubmenu-item is-selected">
+ <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
+ </li>
+ <li class="CDB-NavSubmenu-item">
+ <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
+ </li>
+ </ul>
+ </nav>
+</div>
-
Shapes/Add
-Description
+Shapes/Add
+Description
@@ -13691,8 +12761,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Arrow
-Description
+Shapes/Arrow
+Description
@@ -13725,8 +12795,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Check circle
-Description
+Shapes/Check circle
+Description
@@ -13837,8 +12907,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Close
-Description
+Shapes/Close
+Description
@@ -13925,8 +12995,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Dash
-Description
+Shapes/Dash
+Description
@@ -14013,8 +13083,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Dataset
-Description
+Shapes/Dataset
+Description
@@ -14171,8 +13241,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Dots
-You may resize and change the colors of the icons with the glyph--classes. Available sizes and colors listed:
Shapes/Dots
+You may resize and change the colors of the icons with the glyph--classes. Available sizes and colors listed:
@@ -14191,8 +13261,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Error circle
-Description
+Shapes/Error circle
+Description
@@ -14303,8 +13373,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Hamburguer
-Description
+Shapes/Hamburguer
+Description
@@ -14365,8 +13435,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Magnify
-Description
+Shapes/Magnify
+Description
@@ -14455,8 +13525,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Move
-Description
+Shapes/Move
+Description
@@ -14627,8 +13697,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Paragrapgh
-Description
+Shapes/Paragrapgh
+Description
@@ -14761,8 +13831,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Three Points
-Description
+Shapes/Three Points
+Description
@@ -14967,8 +14037,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Toogle Arrows
-Description
+Shapes/Toogle Arrows
+Description
@@ -15135,8 +14205,8 @@ hsla(120, 100%, 50%, 1);
-
Shapes/Type
-Description
+Shapes/Type
+Description
@@ -15211,8 +14281,8 @@ hsla(120, 100%, 50%, 1);
-
Tags/Data Type
- +Tags/Data Type
+
@@ -15261,8 +14331,8 @@ hsla(120, 100%, 50%, 1);
-
Tags/Metadata
- +Tags/Metadata
+
@@ -15329,8 +14399,8 @@ hsla(120, 100%, 50%, 1);
-
Tags/Privacy
- +Tags/Privacy
+
@@ -15375,8 +14445,8 @@ hsla(120, 100%, 50%, 1);
-
Typography
- +Typography
+
@@ -15390,6 +14460,7 @@ hsla(120, 100%, 50%, 1);
Open Sans 12/16 Regular
Open Sans 10/14 Semibold
Open Sans 10/14 Regular
+?
@@ -15404,6 +14475,7 @@ hsla(120, 100%, 50%, 1);
<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
+<span class="CDB-Text CDB-Size-small is-underlined">?</span>
-
Typography/Icon font
-All available icons in CartoDB.
+Typography/Icon font
+All available icons in CartoDB.
@@ -15518,12 +14590,54 @@ hsla(120, 100%, 50%, 1);
+
+
+
+
+ downloadCircle
+
+
+
+
+
+ pencilMenu
+
+
+
+
+
mobile
+wizard
+
+
+
+
+ undo
+
+
+
+
+
+ redo
+
+
+
+
+
+ lArrowLight
+
+
+
+
+
Basics
-Important notes about this styleguide
-