From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- components/accordion/accordion-basic.html | 22 ++ components/accordion/accordion.scss | 50 +++ components/autocomplete/_autocomplete.scss | 43 +++ components/autocomplete/autocomlete-close.html | 22 ++ components/autocomplete/autocomplete-open.html | 24 ++ components/button/_button.scss | 168 ++++++++++ components/button/button-link-auto.html | 3 + components/button/button-link-disabled.html | 3 + components/button/button-link-extra-small.html | 3 + components/button/button-link-large.html | 3 + components/button/button-link-medium.html | 3 + components/button/button-link-small.html | 3 + components/button/button-link.html | 3 + components/button/button-primary-auto.html | 3 + components/button/button-primary-disabled.html | 3 + components/button/button-primary-extra-small.html | 3 + components/button/button-primary-large.html | 3 + components/button/button-primary-medium.html | 3 + components/button/button-primary-small.html | 3 + components/button/button-primary.html | 3 + components/button/button-secondary-auto.html | 3 + components/button/button-secondary-disabled.html | 3 + .../button/button-secondary-extra-small.html | 3 + components/button/button-secondary-large.html | 3 + components/button/button-secondary-medium.html | 3 + components/button/button-secondary-small.html | 3 + components/button/button-secondary.html | 3 + components/checkbox/_checkbox.scss | 66 ++++ components/checkbox/checkbox-checked.html | 6 + components/checkbox/checkbox-disabled-checked.html | 6 + components/checkbox/checkbox-disabled.html | 6 + components/checkbox/checkbox-unchecked.html | 6 + components/checklist/_checklist.scss | 21 ++ .../checklist/checklist-with-checked-items.html | 24 ++ .../checklist/checklist-with-disabled-items.html | 25 ++ components/checklist/multi-levels-checklist.html | 50 +++ components/checklist/simple-checklist.html | 24 ++ components/dropdown/_dropdown.scss | 346 +++++++++++++++++++++ components/dropdown/dropdown-disabled.html | 11 + components/dropdown/dropdown-groups.html | 10 + components/dropdown/dropdown-requiered.html | 18 ++ components/dropdown/dropdown.html | 9 + components/filter-bar/_filter-bar.scss | 51 +++ components/filter-bar/filter-bar-with-text.html | 16 + components/filter-bar/filter-bar.html | 17 + components/icon/_icon.scss | 250 +++++++++++++++ components/input/_input.scss | 78 +++++ components/input/input-disabled.html | 4 + components/input/input-error.html | 17 + components/input/input-number.html | 6 + components/input/input-placeholder.html | 4 + components/input/input-required.html | 4 + components/input/input-view-only.html | 4 + components/input/input.html | 8 + components/menu/_menu.scss | 68 ++++ components/menu/popup-menu.html | 8 + components/menu/relative-popup-menu.html | 8 + components/modal/_modal.scss | 194 ++++++++++++ components/modal/alert-modal.html | 45 +++ components/modal/custom-modal.html | 27 ++ components/modal/error-modal.html | 32 ++ components/modal/standard-modal.html | 46 +++ components/notification/_notification.scss | 59 ++++ components/notification/notification-info.html | 3 + .../_notifications-container.scss | 8 + components/panel/basic-panel.html | 21 ++ components/panel/panel.scss | 8 + components/radio/_radio.scss | 69 ++++ components/radio/radio-checked.html | 4 + components/radio/radio-disabled-checked.html | 4 + components/radio/radio-disabled.html | 4 + components/radio/radio-unchecked.html | 4 + components/radioGroup/_radioGroup.scss | 20 ++ components/radioGroup/radio-group-disabled.html | 13 + components/radioGroup/radio-group-no-title.html | 12 + components/radioGroup/radio-group-value.html | 13 + components/radioGroup/radio-group.html | 13 + components/search-bar/_search-bar.scss | 61 ++++ components/search-bar/search-bar-with-text.html | 17 + components/search-bar/search-bar.html | 16 + components/tabs/tabs-disabled.html | 8 + components/tabs/tabs-header.html | 8 + components/tabs/tabs-menu.html | 8 + components/tabs/tabs.scss | 35 +++ components/tag-cloud/_tag-cloud.scss | 116 +++++++ components/tag-cloud/disabled-list.html | 31 ++ .../tag-cloud/list-with-active-add-button.html | 50 +++ .../tag-cloud/list-with-some-read-only-items.html | 61 ++++ components/tag-cloud/list-with-unique-error.html | 52 ++++ components/tag-cloud/simple-list.html | 50 +++ components/tile/_tile.scss | 172 ++++++++++ components/tile/tile-without-footer.html | 14 + components/tile/vendor-tile.html | 26 ++ components/tile/vfc-tile.html | 17 + components/tile/vlm-tile.html | 22 ++ components/tile/vsp-tile.html | 17 + components/tooltip/_tooltip.scss | 124 ++++++++ components/validation/_validation.scss | 9 + 98 files changed, 3076 insertions(+) create mode 100644 components/accordion/accordion-basic.html create mode 100644 components/accordion/accordion.scss create mode 100644 components/autocomplete/_autocomplete.scss create mode 100644 components/autocomplete/autocomlete-close.html create mode 100644 components/autocomplete/autocomplete-open.html create mode 100644 components/button/_button.scss create mode 100644 components/button/button-link-auto.html create mode 100644 components/button/button-link-disabled.html create mode 100644 components/button/button-link-extra-small.html create mode 100644 components/button/button-link-large.html create mode 100644 components/button/button-link-medium.html create mode 100644 components/button/button-link-small.html create mode 100644 components/button/button-link.html create mode 100644 components/button/button-primary-auto.html create mode 100644 components/button/button-primary-disabled.html create mode 100644 components/button/button-primary-extra-small.html create mode 100644 components/button/button-primary-large.html create mode 100644 components/button/button-primary-medium.html create mode 100644 components/button/button-primary-small.html create mode 100644 components/button/button-primary.html create mode 100644 components/button/button-secondary-auto.html create mode 100644 components/button/button-secondary-disabled.html create mode 100644 components/button/button-secondary-extra-small.html create mode 100644 components/button/button-secondary-large.html create mode 100644 components/button/button-secondary-medium.html create mode 100644 components/button/button-secondary-small.html create mode 100644 components/button/button-secondary.html create mode 100644 components/checkbox/_checkbox.scss create mode 100644 components/checkbox/checkbox-checked.html create mode 100644 components/checkbox/checkbox-disabled-checked.html create mode 100644 components/checkbox/checkbox-disabled.html create mode 100644 components/checkbox/checkbox-unchecked.html create mode 100644 components/checklist/_checklist.scss create mode 100644 components/checklist/checklist-with-checked-items.html create mode 100644 components/checklist/checklist-with-disabled-items.html create mode 100644 components/checklist/multi-levels-checklist.html create mode 100644 components/checklist/simple-checklist.html create mode 100644 components/dropdown/_dropdown.scss create mode 100644 components/dropdown/dropdown-disabled.html create mode 100644 components/dropdown/dropdown-groups.html create mode 100644 components/dropdown/dropdown-requiered.html create mode 100644 components/dropdown/dropdown.html create mode 100644 components/filter-bar/_filter-bar.scss create mode 100644 components/filter-bar/filter-bar-with-text.html create mode 100644 components/filter-bar/filter-bar.html create mode 100644 components/icon/_icon.scss create mode 100644 components/input/_input.scss create mode 100644 components/input/input-disabled.html create mode 100644 components/input/input-error.html create mode 100644 components/input/input-number.html create mode 100644 components/input/input-placeholder.html create mode 100644 components/input/input-required.html create mode 100644 components/input/input-view-only.html create mode 100644 components/input/input.html create mode 100644 components/menu/_menu.scss create mode 100644 components/menu/popup-menu.html create mode 100644 components/menu/relative-popup-menu.html create mode 100644 components/modal/_modal.scss create mode 100644 components/modal/alert-modal.html create mode 100644 components/modal/custom-modal.html create mode 100644 components/modal/error-modal.html create mode 100644 components/modal/standard-modal.html create mode 100644 components/notification/_notification.scss create mode 100644 components/notification/notification-info.html create mode 100644 components/notifications-container/_notifications-container.scss create mode 100644 components/panel/basic-panel.html create mode 100644 components/panel/panel.scss create mode 100644 components/radio/_radio.scss create mode 100644 components/radio/radio-checked.html create mode 100644 components/radio/radio-disabled-checked.html create mode 100644 components/radio/radio-disabled.html create mode 100644 components/radio/radio-unchecked.html create mode 100644 components/radioGroup/_radioGroup.scss create mode 100644 components/radioGroup/radio-group-disabled.html create mode 100644 components/radioGroup/radio-group-no-title.html create mode 100644 components/radioGroup/radio-group-value.html create mode 100644 components/radioGroup/radio-group.html create mode 100644 components/search-bar/_search-bar.scss create mode 100644 components/search-bar/search-bar-with-text.html create mode 100644 components/search-bar/search-bar.html create mode 100644 components/tabs/tabs-disabled.html create mode 100644 components/tabs/tabs-header.html create mode 100644 components/tabs/tabs-menu.html create mode 100644 components/tabs/tabs.scss create mode 100644 components/tag-cloud/_tag-cloud.scss create mode 100644 components/tag-cloud/disabled-list.html create mode 100644 components/tag-cloud/list-with-active-add-button.html create mode 100644 components/tag-cloud/list-with-some-read-only-items.html create mode 100644 components/tag-cloud/list-with-unique-error.html create mode 100644 components/tag-cloud/simple-list.html create mode 100644 components/tile/_tile.scss create mode 100644 components/tile/tile-without-footer.html create mode 100644 components/tile/vendor-tile.html create mode 100644 components/tile/vfc-tile.html create mode 100644 components/tile/vlm-tile.html create mode 100644 components/tile/vsp-tile.html create mode 100644 components/tooltip/_tooltip.scss create mode 100644 components/validation/_validation.scss (limited to 'components') diff --git a/components/accordion/accordion-basic.html b/components/accordion/accordion-basic.html new file mode 100644 index 0000000..fe85473 --- /dev/null +++ b/components/accordion/accordion-basic.html @@ -0,0 +1,22 @@ +
+
+
+ + + + + + +
+
+ Accordion Title +
+
+
+
+ Accordion body +
+
+
\ No newline at end of file diff --git a/components/accordion/accordion.scss b/components/accordion/accordion.scss new file mode 100644 index 0000000..ef65b9c --- /dev/null +++ b/components/accordion/accordion.scss @@ -0,0 +1,50 @@ +.sdc-accordion { + display: flex; + flex-direction: column; + margin-bottom: 10px; + &.disabled { + opacity: .4; + pointer-events: none; + } + &:not(.disabled) { + .sdc-accordion-header { + cursor: pointer; + } + } + .sdc-accordion-header { + display: flex; + flex-direction: row; + .svg-icon-wrapper { + margin-right: 20px; + transition: transform 0.4s; + &.down { + transform: rotate(180deg); + } + .svg-icon { + fill: $gray; + width: 14px; + height: 8px; + } + } + &.arrow-right { + justify-content: space-between; + .svg-icon-wrapper{ + order:1; + margin:0; + } + } + } + .sdc-accordion-body { + padding-left: 10px; + opacity: 0; + overflow-y: hidden; + max-height: 0; + padding-top: 0px; + transition: opacity 0.33s linear, padding-top 0.3s linear; + &.open { + padding-top: 5px; + opacity: 1; + max-height: 9999px; + } + } +} diff --git a/components/autocomplete/_autocomplete.scss b/components/autocomplete/_autocomplete.scss new file mode 100644 index 0000000..7275156 --- /dev/null +++ b/components/autocomplete/_autocomplete.scss @@ -0,0 +1,43 @@ +.sdc-autocomplete-container{ + position: relative; + + &.results-shown{ + .sdc-input__input{ + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + + ul.autocomplete-results { + opacity: 0; + border: solid 1px $blue; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-top:none; + background-color: $white; + max-height: 200px; + box-shadow: 0 3px 7px -3px $dark-gray; + overflow-y: scroll; + overflow-x: hidden; + position: absolute; + box-sizing: border-box; + width: 100%; + left: 0; + top: 100%; + + li { + color:$text-black; + text-indent: 10px; + line-height: 30px; + cursor:pointer; + @include body-1; + + &:hover { + background-color: $lighter-blue; + color: $blue; + } + } + + } + + } diff --git a/components/autocomplete/autocomlete-close.html b/components/autocomplete/autocomlete-close.html new file mode 100644 index 0000000..93946bb --- /dev/null +++ b/components/autocomplete/autocomlete-close.html @@ -0,0 +1,22 @@ +
+
+
+ + +
+ + + + + + + + + + +
+
+ +
+
+ diff --git a/components/autocomplete/autocomplete-open.html b/components/autocomplete/autocomplete-open.html new file mode 100644 index 0000000..01b1f40 --- /dev/null +++ b/components/autocomplete/autocomplete-open.html @@ -0,0 +1,24 @@ +
+
+
+ + +
+ + + + + + + + + + +
+
+
red
+
yellow
+
orange
+
green
+
+
diff --git a/components/button/_button.scss b/components/button/_button.scss new file mode 100644 index 0000000..3c21a45 --- /dev/null +++ b/components/button/_button.scss @@ -0,0 +1,168 @@ +.sdc-button { + order:1; + @include box-sizing; + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: row; + outline: none; + border-radius: 2px; + padding: 0 12px; + height: 36px; + line-height: 36px; + width: 120px; + min-width: 90px; + cursor: pointer; + text-align: center; + text-transform: uppercase; + @include body-1; + + &:disabled { + cursor: default; + } + + // Primary button + &.sdc-button__primary { + border: 1px solid transparent; + background-color: $blue; + color: $white; + + &:not(:disabled) { + &:hover, &:active { + background-color: $light-blue; + } + &:focus:not(:active) { + border: 1px solid $white; + background-color: $light-blue; + box-shadow: 0px 0px 0px 1px $light-blue; + } + } + + &:disabled{ + background: $blue-disabled; + } + } + + // Secondary button + &.sdc-button__secondary { + border: 1px solid $blue; + background-color: transparent; + color: $blue; + + &:not(:disabled) { + &:hover, &:active { + background-color: $light-blue; + color:$white; + } + &:focus:not(:active) { + color: $light-blue; + box-shadow: inset 0px 0px 0px 0px $dark-blue, 0px 0px 0px 1px $blue; + &:hover { + color: $white; + } + } + } + + &:disabled { + color: $blue-disabled; + border-color: $blue-disabled; + } + } + + // Link button + &.sdc-button__link { + background-color: transparent; + color: $blue; + fill: $blue; + border: none; + + &:not(:disabled) { + &:hover, &:active { + color: $light-blue; + } + &:focus:not(:active) { + border: 1px solid $dark-blue; + color: $light-blue; + } + } + + &:disabled{ + color: $blue-disabled; + } + } + + + // alert button + &.sdc-button__alert { + border: none; + background-color: $red; + color: $white; + + &:not(:disabled) { + &:hover, &:active { + background-color: $light-red; + } + &:focus:not(:active) { + border: 0.5px solid $white; + background-color: $light-red; + box-shadow: 0px 0px 0px 1px $light-red; + } + } + + &:disabled{ + background: $disabled-red; + } + } + + + /*** Sizes ***/ + &.btn-large{ + width: $btn-large; + } + + &.btn-medium{ + width: $btn-medium; + } + + &.btn-small{ + width: $btn-small; + } + + &.btn-x-small{ + width: $btn-extra-small; + } + + &.btn-default{ + width: $btn-default; + } + + /*** Buttons with icons ***/ + &.sdc-icon-right { + flex-direction: row-reverse; + .svg-icon { + margin-left: 15px; + } + } + + &.sdc-icon-left { + flex-direction: row; + .svg-icon { + margin-right: 15px; + } + } + + svg { + display: inline-block; + vertical-align: middle; + } +} +.sdc-button__wrapper { + display: inline-flex; +} +.sdc-button__spinner { + padding-top: 6px; + margin:0 2px; + &.left { + order:2; + } +} diff --git a/components/button/button-link-auto.html b/components/button/button-link-auto.html new file mode 100644 index 0000000..22ac4c8 --- /dev/null +++ b/components/button/button-link-auto.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-link-disabled.html b/components/button/button-link-disabled.html new file mode 100644 index 0000000..9267620 --- /dev/null +++ b/components/button/button-link-disabled.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-link-extra-small.html b/components/button/button-link-extra-small.html new file mode 100644 index 0000000..245f885 --- /dev/null +++ b/components/button/button-link-extra-small.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-link-large.html b/components/button/button-link-large.html new file mode 100644 index 0000000..6d1780c --- /dev/null +++ b/components/button/button-link-large.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-link-medium.html b/components/button/button-link-medium.html new file mode 100644 index 0000000..cb0293d --- /dev/null +++ b/components/button/button-link-medium.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-link-small.html b/components/button/button-link-small.html new file mode 100644 index 0000000..5c195fa --- /dev/null +++ b/components/button/button-link-small.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-link.html b/components/button/button-link.html new file mode 100644 index 0000000..5c2070b --- /dev/null +++ b/components/button/button-link.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary-auto.html b/components/button/button-primary-auto.html new file mode 100644 index 0000000..125276f --- /dev/null +++ b/components/button/button-primary-auto.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary-disabled.html b/components/button/button-primary-disabled.html new file mode 100644 index 0000000..b2ef842 --- /dev/null +++ b/components/button/button-primary-disabled.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary-extra-small.html b/components/button/button-primary-extra-small.html new file mode 100644 index 0000000..a3be965 --- /dev/null +++ b/components/button/button-primary-extra-small.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary-large.html b/components/button/button-primary-large.html new file mode 100644 index 0000000..c0a41b1 --- /dev/null +++ b/components/button/button-primary-large.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary-medium.html b/components/button/button-primary-medium.html new file mode 100644 index 0000000..9ddedc5 --- /dev/null +++ b/components/button/button-primary-medium.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary-small.html b/components/button/button-primary-small.html new file mode 100644 index 0000000..847f753 --- /dev/null +++ b/components/button/button-primary-small.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-primary.html b/components/button/button-primary.html new file mode 100644 index 0000000..b1524bf --- /dev/null +++ b/components/button/button-primary.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary-auto.html b/components/button/button-secondary-auto.html new file mode 100644 index 0000000..a183ad8 --- /dev/null +++ b/components/button/button-secondary-auto.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary-disabled.html b/components/button/button-secondary-disabled.html new file mode 100644 index 0000000..4125328 --- /dev/null +++ b/components/button/button-secondary-disabled.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary-extra-small.html b/components/button/button-secondary-extra-small.html new file mode 100644 index 0000000..92c4784 --- /dev/null +++ b/components/button/button-secondary-extra-small.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary-large.html b/components/button/button-secondary-large.html new file mode 100644 index 0000000..958c151 --- /dev/null +++ b/components/button/button-secondary-large.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary-medium.html b/components/button/button-secondary-medium.html new file mode 100644 index 0000000..67f9741 --- /dev/null +++ b/components/button/button-secondary-medium.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary-small.html b/components/button/button-secondary-small.html new file mode 100644 index 0000000..d9d8cd7 --- /dev/null +++ b/components/button/button-secondary-small.html @@ -0,0 +1,3 @@ + diff --git a/components/button/button-secondary.html b/components/button/button-secondary.html new file mode 100644 index 0000000..64967cc --- /dev/null +++ b/components/button/button-secondary.html @@ -0,0 +1,3 @@ + diff --git a/components/checkbox/_checkbox.scss b/components/checkbox/_checkbox.scss new file mode 100644 index 0000000..c35c8e0 --- /dev/null +++ b/components/checkbox/_checkbox.scss @@ -0,0 +1,66 @@ +.sdc-checkbox { + line-height: 14px; + + label { + position: relative; + display: block; + padding-left: 14px; + } + + .sdc-checkbox__input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + position: absolute; + z-index: -1; + opacity: 0; + + // Checkbox not checked + + .sdc-checkbox__label:before { + display: inline-block; + position: absolute; + left: 0; + top: 0; + content: ""; + width: 14px; + height: 14px; + box-sizing: content-box; + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22disabled-a%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cuse%20fill%3D%22%23FFFFFF%22%20xlink%3Ahref%3D%22%23disabled-a%22%2F%3E%20%3Cpath%20stroke%3D%22%23D2D2D2%22%20d%3D%22M2%2C0.5%20C1.17157288%2C0.5%200.5%2C1.17157288%200.5%2C2%20L0.5%2C12%20C0.5%2C12.8284271%201.17157288%2C13.5%202%2C13.5%20L12%2C13.5%20C12.8284271%2C13.5%2013.5%2C12.8284271%2013.5%2C12%20L13.5%2C2%20C13.5%2C1.17157288%2012.8284271%2C0.5%2012%2C0.5%20L2%2C0.5%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); + } + + // Checkbox disabled and not checked + &:disabled { + + .sdc-checkbox__label { + color: $gray; + &:before { + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22disabled-a%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cuse%20fill%3D%22%23F2F2F2%22%20xlink%3Ahref%3D%22%23disabled-a%22%2F%3E%20%3Cpath%20stroke%3D%22%23D2D2D2%22%20d%3D%22M2%2C0.5%20C1.17157288%2C0.5%200.5%2C1.17157288%200.5%2C2%20L0.5%2C12%20C0.5%2C12.8284271%201.17157288%2C13.5%202%2C13.5%20L12%2C13.5%20C12.8284271%2C13.5%2013.5%2C12.8284271%2013.5%2C12%20L13.5%2C2%20C13.5%2C1.17157288%2012.8284271%2C0.5%2012%2C0.5%20L2%2C0.5%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); + } + } + } + + &:checked { + // Checkbox checked + + .sdc-checkbox__label:before { + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22%23009fdb%22%3E%3Cpath%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%20M3.85355339%2C7.54977605%20C3.65829124%2C7.35451391%203.34170876%2C7.35451391%203.14644661%2C7.54977605%20C2.95118446%2C7.7450382%202.95118446%2C8.06162069%203.14644661%2C8.25688283%20L5.71469032%2C10.8251265%20C5.93114093%2C11.0415771%206.28952386%2C11.0144698%206.47095446%2C10.7679244%20L10.8653572%2C4.79638422%20C11.0290275%2C4.57397322%2010.9814087%2C4.26099251%2010.7589977%2C4.09732224%20C10.5365867%2C3.93365198%2010.223606%2C3.98127076%2010.0599357%2C4.20368177%20L6.01038326%2C9.70660592%20L3.85355339%2C7.54977605%20Z%22%2F%3E%3C%2Fsvg%3E'); + } + + // Checkbox disabled and checked + &:disabled { + + .sdc-checkbox__label:before { + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%20M3.85355339%2C7.54977605%20C3.65829124%2C7.35451391%203.34170876%2C7.35451391%203.14644661%2C7.54977605%20C2.95118446%2C7.7450382%202.95118446%2C8.06162069%203.14644661%2C8.25688283%20L5.71469032%2C10.8251265%20C5.93114093%2C11.0415771%206.28952386%2C11.0144698%206.47095446%2C10.7679244%20L10.8653572%2C4.79638422%20C11.0290275%2C4.57397322%2010.9814087%2C4.26099251%2010.7589977%2C4.09732224%20C10.5365867%2C3.93365198%2010.223606%2C3.98127076%2010.0599357%2C4.20368177%20L6.01038326%2C9.70660592%20L3.85355339%2C7.54977605%20Z%22%2F%3E%3C%2Fsvg%3E'); + } + } + } + + &:not(:disabled) { + + .sdc-checkbox__label { + cursor: pointer; + } + } + } + + .sdc-checkbox__label:not(:empty) { + padding-left: 14px; + @include body-1; + } +} diff --git a/components/checkbox/checkbox-checked.html b/components/checkbox/checkbox-checked.html new file mode 100644 index 0000000..de0c0d8 --- /dev/null +++ b/components/checkbox/checkbox-checked.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/components/checkbox/checkbox-disabled-checked.html b/components/checkbox/checkbox-disabled-checked.html new file mode 100644 index 0000000..53e77ec --- /dev/null +++ b/components/checkbox/checkbox-disabled-checked.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/components/checkbox/checkbox-disabled.html b/components/checkbox/checkbox-disabled.html new file mode 100644 index 0000000..2425218 --- /dev/null +++ b/components/checkbox/checkbox-disabled.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/components/checkbox/checkbox-unchecked.html b/components/checkbox/checkbox-unchecked.html new file mode 100644 index 0000000..9cc3d1c --- /dev/null +++ b/components/checkbox/checkbox-unchecked.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/components/checklist/_checklist.scss b/components/checklist/_checklist.scss new file mode 100644 index 0000000..248993d --- /dev/null +++ b/components/checklist/_checklist.scss @@ -0,0 +1,21 @@ +$space-lines: 14px; +$padding-for-sub-level: 28px; +.checkbox-item{ + margin: $space-lines 0; + .sdc-checkbox__label{ + @include body-2-emphasis; + } + .semi-checked{ + .sdc-checkbox__label:before{ + background: no-repeat url('data:image/svg+xml;utf8,'); + } + } +} +.checkbox-sublist{ + padding-left: $padding-for-sub-level; + .checkbox-item{ + .sdc-checkbox__label{ + @include body-2; + } + } +} diff --git a/components/checklist/checklist-with-checked-items.html b/components/checklist/checklist-with-checked-items.html new file mode 100644 index 0000000..e1adbd7 --- /dev/null +++ b/components/checklist/checklist-with-checked-items.html @@ -0,0 +1,24 @@ +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
diff --git a/components/checklist/checklist-with-disabled-items.html b/components/checklist/checklist-with-disabled-items.html new file mode 100644 index 0000000..f001ec1 --- /dev/null +++ b/components/checklist/checklist-with-disabled-items.html @@ -0,0 +1,25 @@ +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+ diff --git a/components/checklist/multi-levels-checklist.html b/components/checklist/multi-levels-checklist.html new file mode 100644 index 0000000..9aa136e --- /dev/null +++ b/components/checklist/multi-levels-checklist.html @@ -0,0 +1,50 @@ +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
diff --git a/components/checklist/simple-checklist.html b/components/checklist/simple-checklist.html new file mode 100644 index 0000000..1fe55da --- /dev/null +++ b/components/checklist/simple-checklist.html @@ -0,0 +1,24 @@ +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
diff --git a/components/dropdown/_dropdown.scss b/components/dropdown/_dropdown.scss new file mode 100644 index 0000000..908bbaa --- /dev/null +++ b/components/dropdown/_dropdown.scss @@ -0,0 +1,346 @@ +.sdc-dropdown { + @include body-1; + position: relative; + display: block; + + .sdc-dropdown__error--block { + display: none; + } + + &.headless { + display: none; + } + + /************************************* + SDC DropDown styles + *************************************/ + .sdc-dropdown__component-container { + position: relative; + height: 40px; + + .sdc-dropdown__header { + background: $white; + text-align: left; + position: relative; + color: $dark-gray; + @include base-font-regular; + font-size: 14px; + text-indent: 6px; + border: solid 1px $light-gray; + width: 100%; + height: 40px; + line-height: 36px; + box-sizing: border-box; + border-radius: 2px; + + &.placeholder { + @include base-font-italic; + color: $gray; + } + + &.disabled { + border: solid 1px $light-gray; + background-color: $light-silver; + color: $light-gray; + cursor: default; + + &:focus { + border: solid 1px $light-gray; + outline: none; + .svg-icon>svg { + fill: $light-gray; + } + } + .svg-icon>svg { + fill: $light-gray; + } + } + + &:focus { + border: solid 1px $light-blue; + outline: none; + .svg-icon>svg { + fill: $light-blue; + } + } + + .sdc-dropdown-handle { + float: right; + .svg-icon>svg { + fill: $dark-gray; + } + } + + svg-icon { + margin: 10px 6px; + float: right; + } + + } + + } + + &.open-bottom { + .sdc-dropdown__header { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + border: 1px solid $light-blue; + box-sizing: border-box; + .svg-icon>svg { + fill: $light-blue; + } + + } + } + + &.open-top { + .sdc-dropdown__header { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + + .sdc-dropdown__options-list { + position: relative; + opacity: 0; + top: 100%; + left: 0; + width: 100%; + max-height: 0; + overflow-y: auto; + box-sizing: border-box; + border: 1px solid $light-blue; + background-color: white; + box-shadow: 0 3px 7px -3px $dark-gray; + z-index: 999; + &.sdc-dropdown__options-wrapper--top { + bottom: 40px; + border-top: 1px solid $light-blue; + } + &.sdc-dropdown__options-list--headless { + border-top: 1px solid $light-blue; + } + .sdc-dropdown__option { + @include base-font-regular; + font-size: 14px; + text-indent: 10px; + padding: 10px; + background: transparent; + cursor: pointer; + height: 40px; + box-sizing: border-box; + &.sdc-dropdown__option--hr { + height: 1px; + overflow: hidden; + border-top: 1px solid $silver; + padding: 0; + margin: 10px 20px; + } + &.sdc-dropdown__option--group { + text-indent: 30px; + } + &:hover { + background-color: $light-silver; + //@include base-font-semibold; + } + &.selected { + background-color: $lighter-blue; + color: $blue; + @include base-font-semibold; + } + &.sdc-dropdown__option--header { + @include base-font-semibold; + color: $text-black; + cursor: default; + &.sdc-dropdown__option--group { + text-indent: 10px; + } + &:hover { + background-color: transparent; + } + } + &.sdc-dropdown__option--disabled { + color: $gray; + cursor: default; + &:hover { + background-color: transparent; + } + &::after { + color: $gray; + } + &:focus { + border: solid 1px $light-gray; + outline: none; + } + } + } + } + .sdc-dropdown__select { + @include base-font-regular; + text-indent: 6px; + border: solid 1px $light-gray; + width: 100%; + &.disabled { + opacity: 0.7; + } + option { + padding: 3px; + } + } + .sdc-dropdown__label { + margin-bottom: 5px; + display: block; + @include body-3-emphasis; + color: $text-black; + &.required::before { + content: '*'; + color: $red; + margin: 0 4px 0 0; + } + } + + /************************************* + SDC Auto-DropDown styles + *************************************/ + &.open-bottom { + .sdc-dropdown-auto__wrapper { + border: 1px solid $light-blue; + box-sizing: border-box; + .svg-icon>svg { + fill: $light-blue; + } + } + } + + .sdc-dropdown-auto__wrapper { + display: flex; + border: solid 1px $light-gray; + border-radius: 2px; + + .sdc-dropdown__header { + border: none; + color: $gray; + + &:focus { + border: none; + } + } + + svg-icon { + margin: 12px 10px; + float: right; + } + } + + /************************************* + SDC Error styles + *************************************/ + &.sdc-dropdown__error { + .sdc-dropdown__header { + border: solid 1px $red; + @include font-error; + &::after { + @include font-error; + } + &:focus { + border: solid 1px $red; + .sdc-dropdown-handle { + use { + fill: $red; + } + } + } + .sdc-dropdown-handle { + use { + fill: $red; + } + } + } + .sdc-dropdown__error--block { + display: block; + @include font-error; + margin: 4px 0; + @include body-3; + } + .sdc-dropdown__options-wrapper--frame { + .sdc-dropdown__options-list { + border: 1px solid $red; + border-top: none; + } + &.sdc-dropdown__options-wrapper--top { + .sdc-dropdown__options-list { + border-top: 1px solid $red; + } + } + } + .svg-icon.__exclamationTriangleFull { + width: 12px; + height: 10px; + margin-right: 6px; + } + } +} + +.sdc-dropdown__error--icon { + fill: $red; +} + +/********************************************************/ + +/* Animation */ + +/********************************************************/ + +@include keyframes-expand-animation('top-to-bottom-exp', 244px); +@include keyframes-collapse-animation('top-to-bottom', 244px); +@include keyframes-expand-animation('bottom-to-top-exp', 244px); +@include keyframes-collapse-animation('bottom-to-top', 244px); +.sdc-dropdown__options-wrapper--frame { + overflow: hidden; + position: absolute; + top: auto; + width: 100%; + &.sdc-dropdown__options-wrapper--top { + bottom: 40px; + top: auto; + padding: 10px 0 0 0; + /* Expend animation from bottom to top */ + .sdc-dropdown__options-list { + border-top: 1px solid $light-blue; + box-shadow: 0 0 7px -1px $dark-gray; + &.sdc-dropdown__options-list--animation-init { + border-bottom: none; + padding: 0; + animation: bottom-to-top .0s forwards; + } + } + &.sdc-dropdown__options-wrapper--uncollapsed { + .sdc-dropdown__options-list { + animation: bottom-to-top-exp .0s forwards; + } + } + } +} + +/** +Fold animation from top to bottom + */ + +.sdc-dropdown { + .sdc-dropdown__options-list.sdc-dropdown__options-list--animation-init { + animation: top-to-bottom .0s forwards; + } +} + +/** +Expend animation from top to bottom + */ + +.sdc-dropdown { + .sdc-dropdown__options-wrapper--uncollapsed { + .sdc-dropdown__options-list.sdc-dropdown__options-list--animation-init { + animation: top-to-bottom-exp .0s forwards; + } + } +} diff --git a/components/dropdown/dropdown-disabled.html b/components/dropdown/dropdown-disabled.html new file mode 100644 index 0000000..9e0bd86 --- /dev/null +++ b/components/dropdown/dropdown-disabled.html @@ -0,0 +1,11 @@ +
+ + + +
    +
  • First Option
    • +
  • Second Option
    • +
  • Third Option
    • +
+ +
diff --git a/components/dropdown/dropdown-groups.html b/components/dropdown/dropdown-groups.html new file mode 100644 index 0000000..3e32f16 --- /dev/null +++ b/components/dropdown/dropdown-groups.html @@ -0,0 +1,10 @@ +
+ + +
    +
  • Group 1 title
    • +
  • First Option
    • +
  • Second Option
    • +
  • Third Option
    • +
+
diff --git a/components/dropdown/dropdown-requiered.html b/components/dropdown/dropdown-requiered.html new file mode 100644 index 0000000..4fd555d --- /dev/null +++ b/components/dropdown/dropdown-requiered.html @@ -0,0 +1,18 @@ +
+ + +
    +
  • First Option
    • +
  • Second Option
    • +
  • Third Option
    • +
+
+ + + Error message! +
+
+ diff --git a/components/dropdown/dropdown.html b/components/dropdown/dropdown.html new file mode 100644 index 0000000..440f70b --- /dev/null +++ b/components/dropdown/dropdown.html @@ -0,0 +1,9 @@ +
+ + +
    +
  • First Option
    • +
  • Second Option
    • +
  • Third Option
    • +
+
diff --git a/components/filter-bar/_filter-bar.scss b/components/filter-bar/_filter-bar.scss new file mode 100644 index 0000000..f48a3df --- /dev/null +++ b/components/filter-bar/_filter-bar.scss @@ -0,0 +1,51 @@ +$inputHeight: 38px; + +.sdc-filter-bar { + .sdc-input { + margin: 0; + .sdc-input__input{ + padding-right: 40px; + } + } + + .filter-button{ + position: relative; + float: right; + bottom: $inputHeight; + height: $inputHeight; + right: 11px; + svg{ + position: relative; + top: 50%; + transform: translateY(-50%); + } + } + + .magnify-button { + svg{ + height: 20px; + width: 20px; + path{ + fill: $dark-gray; + } + } + } + + .clear-search-x { + cursor: pointer; + svg{ + height: 14px; + width: 14px; + path{ + fill: $dark-gray; + } + &:hover{ + path{ + fill: $blue; + } + } + } + } +} + + diff --git a/components/filter-bar/filter-bar-with-text.html b/components/filter-bar/filter-bar-with-text.html new file mode 100644 index 0000000..de7a225 --- /dev/null +++ b/components/filter-bar/filter-bar-with-text.html @@ -0,0 +1,16 @@ +
+
+ + + + + + + + + + + + +
+
diff --git a/components/filter-bar/filter-bar.html b/components/filter-bar/filter-bar.html new file mode 100644 index 0000000..90f580d --- /dev/null +++ b/components/filter-bar/filter-bar.html @@ -0,0 +1,17 @@ +
+
+ + + + + + + + + + + + +
+
+ diff --git a/components/icon/_icon.scss b/components/icon/_icon.scss new file mode 100644 index 0000000..cd94eb7 --- /dev/null +++ b/components/icon/_icon.scss @@ -0,0 +1,250 @@ +@mixin color-icon($primary-color, $secondary-color) { + color: $primary-color; + fill: $primary-color; + span{ + color: $primary-color; + } + &:not([disabled]):hover, &:active, &:focus { + &.clickable { + color: $secondary-color; + fill: $secondary-color; + } + } +} + +.svg-icon-wrapper { + display: inline-flex; + justify-content: center; + align-items: center; + + &[disabled] { + opacity: 0.7; + } + + &.bottom { + flex-direction: column; + .svg-icon-label { + margin-bottom: 5px; + } + } + + &.right { + float: none; + .svg-icon-label { + margin-left: 5px; + } + } + + &.top { + flex-direction: column-reverse; + .svg-icon-label { + margin-top: 5px; + } + } + + &.left { + flex-direction: row-reverse; + .svg-icon-label { + margin-right: 5px; + } + } + + &.__warning { + @include color-icon($yellow, $yellow); + } + + &.__primary { + @include color-icon($blue, $light-blue); + } + + &.__secondary { + @include color-icon($gray, $dark-gray); + } + + &.__positive { + @include color-icon($green, $green); + } + + &.__negative { + @include color-icon($red, $red); + } +} + + +.svg-icon { + width: 20px; + height: 20px; + + &.__angleDoubleLeft { + width: 14px; + height: 14px; + } + &.__angleDoubleRight { + width: 14px; + height: 14px; + } + &.__angleLeft { + width: 14px; + height: 14px; + } + &.__angleRight { + width: 14px; + height: 14px; + } + &.__artifacts { + width: 16px; + height: 20px; + } + &.__back { + width: 25px; + height: 25px; + } + &.__base { + // + } + &.__calendar { + // + } + &.__caretDown { + } + &.__check { + } + &.__checkCircle { + width: 16px; + height: 16px; + } + &.__chevronDown{ + width: 10px; + height: 7px; + } + &.__chevronUp { + width: 11px; + height: 7px; + } + &.__close { + width: 10px; + height: 10px; + } + &.__download { + width: 15px; + height: 11px; + } + &.__env { + width: 15px; + height: 14px; + } + &.__error { + width: 14px; + height: 14px; + } + &.__errorCircle { + width: 16px; + height: 16px; + } + &.__exclamationTriangleFull { + width: 15px; + height: 13px; + } + &.__exclamationTriangleLine { + width: 15px; + height: 13px; + } + &.__filter { + // + } + &.__locked { + width: 11px; + } + &.__module { + // + } + &.__nestedHeat { + width: 15px; + height: 13px; + } + &.__network { + width: 13px; + height: 13px; + } + &.__others { + width: 12px; + height: 12px; + } + &.__pencil { + width: 15px; + height: 15px; + } + &.__plus { + width: 9px; + height: 9px; + } + &.__plusCircle { + width: 19px; + height: 19px; + } + &.__plusThin { + width: 9px; + height: 9px; + } + &.__proceedToOverview { + width: 24px; + height: 20px; + } + &.__search { + // + } + &.__sliders { + } + &.__trashO { + width: 15px; + height: 16px; + } + &.__unlocked { + width: 11px; + } + &.__upload { + width: 15px; + height: 11px; + } + &.__vendor { + width: 53px; + height: 47px; + } + &.__versionControllerLockClosed { + width: 21px; + height: 23px; + } + &.__versionControllerLockOpen { + width: 24px; + height: 28px; + } + &.__versionControllerRevert { + // + } + &.__versionControllerSave { + // + } + &.__versionControllerSubmit { + // + } + &.__versionControllerPermissions { + // + } + &.__vlm { + width: 53px; + height: 47px; + } + &.__vsp { + width: 53px; + height: 47px; + } + &.__zip { + width: 29px; + height: 23px; + } +} + +.svg-icon-missing { + @include body-2; + @include font-error; +} diff --git a/components/input/_input.scss b/components/input/_input.scss new file mode 100644 index 0000000..a84d312 --- /dev/null +++ b/components/input/_input.scss @@ -0,0 +1,78 @@ +.sdc-input { + margin-bottom: 10px; + + .sdc-input__label { + margin-bottom: 5px; + display: block; + @include body-3-emphasis; + + &.required::before { + content: '*'; + color: $red; + margin: 0 4px 0 0; + } + } + + .sdc-input__input { + @include box-sizing; + padding: 0 10px; + height: 38px; + width: 100%;//415px; + border: solid 1px $light-gray; + border-radius:2px; + color: $dark-gray; + + &.error, &.error:focus, &.error:disabled { + border: solid 1px $red; + color: $red; + outline: none; + } + + &:read-only{ + border: none; + outline: none; + color: $text-black + } + &:-moz-read-only { /* For Firefox */ + border: none; + outline: none; + color: $text-black + } + + &:focus { + border-color: $blue; + outline: 0 none; + color: $text-black; + } + + &:disabled { + background: $light-silver; + color: $gray; + } + + &::-webkit-input-placeholder /* Chrome/Opera/Safari */ { + color: $gray; + @include base-font-italic; + } + &::-moz-placeholder /* Firefox 19+ */ { + color: $gray; + @include base-font-italic; + } + &:-moz-placeholder /* Firefox 18- */ { + color: $gray; + @include base-font-italic; + } + &:-ms-input-placeholder /* IE 10+ */ + { + color: $gray; + @include base-font-italic; + } + } + + .sdc-label__error{ + margin-top: 2px; + margin-left: 2px; + @include body-3; + } + +} \ No newline at end of file diff --git a/components/input/input-disabled.html b/components/input/input-disabled.html new file mode 100644 index 0000000..bea21b4 --- /dev/null +++ b/components/input/input-disabled.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/input/input-error.html b/components/input/input-error.html new file mode 100644 index 0000000..aafee55 --- /dev/null +++ b/components/input/input-error.html @@ -0,0 +1,17 @@ +
+ + +
+
+ + + + + This is the error message. + +
+
+
\ No newline at end of file diff --git a/components/input/input-number.html b/components/input/input-number.html new file mode 100644 index 0000000..59ef93c --- /dev/null +++ b/components/input/input-number.html @@ -0,0 +1,6 @@ +
+ +
+ +
+
\ No newline at end of file diff --git a/components/input/input-placeholder.html b/components/input/input-placeholder.html new file mode 100644 index 0000000..b07d75d --- /dev/null +++ b/components/input/input-placeholder.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/input/input-required.html b/components/input/input-required.html new file mode 100644 index 0000000..f9dbb16 --- /dev/null +++ b/components/input/input-required.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/input/input-view-only.html b/components/input/input-view-only.html new file mode 100644 index 0000000..4381b22 --- /dev/null +++ b/components/input/input-view-only.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/components/input/input.html b/components/input/input.html new file mode 100644 index 0000000..ef2ba61 --- /dev/null +++ b/components/input/input.html @@ -0,0 +1,8 @@ +
+ + +
\ No newline at end of file diff --git a/components/menu/_menu.scss b/components/menu/_menu.scss new file mode 100644 index 0000000..fe32f32 --- /dev/null +++ b/components/menu/_menu.scss @@ -0,0 +1,68 @@ +.sdc-menu-list { + position: static; + @include box-sizing; + @include box-shadow(0 2px 4px 0 rgba($black, 0.3)); + @include border-radius(2px); + border: 1px solid $light-gray; + border-top: solid 3px $blue; + background: $white; + min-width: 150px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + + .sdc-menu-item:not(.separator) { + @include body-1; + height: 40px; + color: $dark-gray; + padding: 0 12px; + display: flex; + align-items: center; + + svg { + margin-right: 16px; + g, path { + fill: $dark-gray; + } + } + + &:hover { + &:not(.disabled) { + cursor: pointer; + &:not(.selected) { + background: $light-silver; + color: $text-black; + g, path { + fill: $dark-gray; + } + } + } + } + + &.disabled { + color: $gray; + g, path { + fill: $light-gray; + } + } + + &.selected { + background: $lighter-blue; + color: $light-blue; + g, path { + fill: $dark-gray; + } + } + } + + &.relative { + position: relative; + } + + .separator { + cursor: default; + border-top: 1px solid $silver; + margin: 0 0; + height: 0; + } +} diff --git a/components/menu/popup-menu.html b/components/menu/popup-menu.html new file mode 100644 index 0000000..f4f1cbd --- /dev/null +++ b/components/menu/popup-menu.html @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/components/menu/relative-popup-menu.html b/components/menu/relative-popup-menu.html new file mode 100644 index 0000000..e5a5449 --- /dev/null +++ b/components/menu/relative-popup-menu.html @@ -0,0 +1,8 @@ +
+
    +
  • item 1 (selected)
    • +
  • item 2
    • +
  • +
  • item 3
    • +
+
\ No newline at end of file diff --git a/components/modal/_modal.scss b/components/modal/_modal.scss new file mode 100644 index 0000000..e87e516 --- /dev/null +++ b/components/modal/_modal.scss @@ -0,0 +1,194 @@ +.sdc-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + margin: auto; + display: flex; + align-items: center; + z-index: 1001; + svg path { + fill: inherit; + } + .sdc-modal__wrapper { + @include body-1; + background: $white; + width: 100%; + @include box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.50)); + color: $text-black; + display: flex; + flex-direction: column; + &.sdc-modal-type-info { + border-top: solid 6px $blue; + .sdc-modal__svg-use { + fill: $blue; + } + .svg-icon { + &.__errorCircle { + width: 30px; + height: 30px; + } + } + } + &.sdc-modal-type-alert { + border-top: solid 6px $yellow; + .sdc-modal__svg-use { + fill: $yellow; + } + .svg-icon { + &.__exclamationTriangleLine { + width: 30px; + height: 30px; + } + } + } + &.sdc-modal-type-error { + border-top: solid 6px $red; + .sdc-modal__svg-use { + fill: $red; + } + .svg-icon { + &.__error { + width: 30px; + height: 30px; + } + } + } + &.sdc-modal-type-custom { + padding: 0px; + border-top: none; + .sdc-custom__header { + @include box-sizing; + background-color: $blue; + color: $white; + height: 50px; + align-items: center; + padding-top: 0px; + .title { + color: $white; + padding-top: 0px; + @include heading-3; + } + .sdc-modal__close-button { + margin-top: 0px; + width: 16px; + height: 16px; + line-height: 16px; + .svg-icon > svg { + fill: $white; + color: $white; + } + &.disabled { + cursor: default; + .svg-icon > svg { + fill: $silver; + color: $silver; + } + } + } + .sdc-modal__close-button-svg { + width: 16px; + height: 16px; + .sdc-modal__svg-use { + fill: $white; + } + .svg-icon { + height: 16px; + width: 16px; + fill: $white; + } + } + } + .sdc-modal__content { + padding: 20px 40px; + } + } + .sdc-modal__header { + padding: 20px 20px 0 20px; + display: flex; + justify-content: space-between; + text-align: left; + height: 30px; + line-height: 30px; + .sdc-modal__icon { + margin-right: 10px; + } + .title { + @include heading-2; + flex: 1 1 auto; + color: $text-black; + } + .sdc-modal__close-button { + order: 3; + width: 14px; + height: 14px; + line-height: 14px; + cursor: pointer; + .sdc-modal__svg-use { + fill: $black; + } + &.disabled { + cursor: default; + } + } + } + .sdc-modal__content { + order: 2; + padding: 10px 60px 20px 60px; + } + .sdc-modal__footer { + order: 3; + background-color: $white; + border-top: solid 1px $silver; + padding: 10px; + display: flex; + justify-content: flex-end; + button { + margin-left: 10px; + } + } + } +} + +.modal-background { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: $black; + opacity: 0.70; + z-index: 1000; + &.show { + z-index: 1000; + opacity: 0.70; + transition: opacity .3s ease, z-index .3s; + } + &.hide { + z-index: -1; + opacity: 0; + transition: opacity .35s ease, z-index .35s; + } +} + +.xl { + width: 1200px; +} + +.l { + width: 875px; +} + +.md { + width: 650px; +} + +.sm { + width: 500px; +} + +.xsm { + width: 432px; +} diff --git a/components/modal/alert-modal.html b/components/modal/alert-modal.html new file mode 100644 index 0000000..1ed72e8 --- /dev/null +++ b/components/modal/alert-modal.html @@ -0,0 +1,45 @@ +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
Title
+
+ + + + + +
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra
+
+
+
+
+
+
\ No newline at end of file diff --git a/components/modal/custom-modal.html b/components/modal/custom-modal.html new file mode 100644 index 0000000..1011ca6 --- /dev/null +++ b/components/modal/custom-modal.html @@ -0,0 +1,27 @@ +
+
+
+
Title
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/components/modal/error-modal.html b/components/modal/error-modal.html new file mode 100644 index 0000000..5a3b5fb --- /dev/null +++ b/components/modal/error-modal.html @@ -0,0 +1,32 @@ +
+
+
+
+ + error + + + + + + + +
+
Title
+
+ + + + + +
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra
+
+
+
+
+
+
\ No newline at end of file diff --git a/components/modal/standard-modal.html b/components/modal/standard-modal.html new file mode 100644 index 0000000..e367900 --- /dev/null +++ b/components/modal/standard-modal.html @@ -0,0 +1,46 @@ +
+
+
+
+ + + Asset 4 + + + + + + + + +
+
+ Standard Modal +
+
+ + + + + + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra +
+
+
+ + +
+
+
+
+
diff --git a/components/notification/_notification.scss b/components/notification/_notification.scss new file mode 100644 index 0000000..dafe8d4 --- /dev/null +++ b/components/notification/_notification.scss @@ -0,0 +1,59 @@ +@include mixin-keyframes-fade-in-vertically(-50px, 'keyframes-slide-notif-in'); +@include mixin-keyframes-fade-out-vertically(20px, 'keyframes-slide-notif-out'); + +.sdc-notification { + position:relative; + + .sdc-notification__wrapper { + padding: 10px; + margin-top:10px; + width: 212px; + animation: keyframes-slide-notif-in 1s; + + &.fade-out__animated { + animation: keyframes-slide-notif-out 0.8s + } + + &.type-info { + background-color: #0e90d2; } + + &.type-error { + background-color: #dd514c; } + + &.type-success { + background-color: #5eb95e; } + + &.type-warn { + background-color: #f37b1d; } + } + + .sdc-notification__content { + display:flex; + flex-direction:row; + + .sdc-notification__icon { + flex: 0 0 auto; + height: 32px; + width: 32px; + margin: 0 14px 0 7px; + background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2382c355%3B%7D.cls-2%7Bfill%3Anone%3Bstroke%3A%23ebf5e4%3Bstroke-miterlimit%3A10%3B%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Evicon%3C/title%3E%3Cg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22/%3E%3C/g%3E%3Cg%20id%3D%22Layer_4%22%20data-name%3D%22Layer%204%22%3E%3Cpolyline%20class%3D%22cls-2%22%20points%3D%227.46%2017.43%2015.36%2021.74%2022.54%208.57%22/%3E%3C/g%3E%3C/svg%3E') + } + + .sdc-notification__message { + flex: 1; + text-align: left; + + .sdc-notification__title { + font-size:13px; + color: white; + } + + .sdc-notification__text { + font-size: 12px; + color: white; + } + } + + } + +} diff --git a/components/notification/notification-info.html b/components/notification/notification-info.html new file mode 100644 index 0000000..6eab4c0 --- /dev/null +++ b/components/notification/notification-info.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/components/notifications-container/_notifications-container.scss b/components/notifications-container/_notifications-container.scss new file mode 100644 index 0000000..7a7a907 --- /dev/null +++ b/components/notifications-container/_notifications-container.scss @@ -0,0 +1,8 @@ +.sdc-notification-container { + + + position:absolute; + top: 10px; + right: 10px; + width: 232px; +} diff --git a/components/panel/basic-panel.html b/components/panel/basic-panel.html new file mode 100644 index 0000000..14e6461 --- /dev/null +++ b/components/panel/basic-panel.html @@ -0,0 +1,21 @@ +
+

+ Panel +

+
+ +
+
+ +
+
\ No newline at end of file diff --git a/components/panel/panel.scss b/components/panel/panel.scss new file mode 100644 index 0000000..921dd74 --- /dev/null +++ b/components/panel/panel.scss @@ -0,0 +1,8 @@ +.sdc-panel { + width: 280px; + overflow-y: auto; + height: 100%; + box-shadow: 1px 0px 4px 0px $light-gray; + background-color: $white; + padding: 0; +} \ No newline at end of file diff --git a/components/radio/_radio.scss b/components/radio/_radio.scss new file mode 100644 index 0000000..9c51846 --- /dev/null +++ b/components/radio/_radio.scss @@ -0,0 +1,69 @@ +.sdc-radio { + line-height: 14px; + + label { + position: relative; + display: block; + padding-left: 14px; + } + + .sdc-radio__input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + position: absolute; + z-index: -1; + opacity: 0; + + // Radio not checked + + .sdc-radio__label:before { + display: inline-block; + position: absolute; + left: 0; + top: 0; + content: ""; + width: 14px; + height: 14px; + box-sizing: content-box; + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + } + + // Radio disabled and not checked + &:disabled:not(:checked) { + + .sdc-radio__label:before { + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + } + } + + &:checked { + // Radio checked + + .sdc-radio__label:before { + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23009fdb%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23009fdb%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + } + + // Radio disabled and checked + &:disabled { + + .sdc-radio__label:before { + background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23d2d2d2%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + } + } + } + + &:not(:disabled) { + + .sdc-radio__label { + cursor: pointer; + } + } + + &:disabled { + + .sdc-radio__label { + color: $gray; + } + } + } + + .sdc-radio__label:not(:empty) { + padding-left: 14px; + @include body-1; + } +} diff --git a/components/radio/radio-checked.html b/components/radio/radio-checked.html new file mode 100644 index 0000000..78283b3 --- /dev/null +++ b/components/radio/radio-checked.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/radio/radio-disabled-checked.html b/components/radio/radio-disabled-checked.html new file mode 100644 index 0000000..9ba6f0c --- /dev/null +++ b/components/radio/radio-disabled-checked.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/radio/radio-disabled.html b/components/radio/radio-disabled.html new file mode 100644 index 0000000..332435f --- /dev/null +++ b/components/radio/radio-disabled.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/radio/radio-unchecked.html b/components/radio/radio-unchecked.html new file mode 100644 index 0000000..6f6a00d --- /dev/null +++ b/components/radio/radio-unchecked.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/components/radioGroup/_radioGroup.scss b/components/radioGroup/_radioGroup.scss new file mode 100644 index 0000000..6b33a79 --- /dev/null +++ b/components/radioGroup/_radioGroup.scss @@ -0,0 +1,20 @@ +.sdc-radio-group { + .sdc-radio-group__radios { + display: flex; + } + .sdc-radio-group__legend { + @include body-2-emphasis; + display: inline-block; + margin-bottom: 5px; + } + .sdc-radio__label { + @include body-1; + margin-right: 20px; + } + .vertical{ + flex-direction: column; + .sdc-radio{ + margin-bottom: 15px; + } + } +} diff --git a/components/radioGroup/radio-group-disabled.html b/components/radioGroup/radio-group-disabled.html new file mode 100644 index 0000000..3cdedc0 --- /dev/null +++ b/components/radioGroup/radio-group-disabled.html @@ -0,0 +1,13 @@ +
+ +
+
+ + +
+
+ + +
+
+
diff --git a/components/radioGroup/radio-group-no-title.html b/components/radioGroup/radio-group-no-title.html new file mode 100644 index 0000000..76217fe --- /dev/null +++ b/components/radioGroup/radio-group-no-title.html @@ -0,0 +1,12 @@ +
+
+
+ + +
+
+ + +
+
+
diff --git a/components/radioGroup/radio-group-value.html b/components/radioGroup/radio-group-value.html new file mode 100644 index 0000000..ac604a6 --- /dev/null +++ b/components/radioGroup/radio-group-value.html @@ -0,0 +1,13 @@ +
+ +
+
+ + +
+
+ + +
+
+
diff --git a/components/radioGroup/radio-group.html b/components/radioGroup/radio-group.html new file mode 100644 index 0000000..baa1444 --- /dev/null +++ b/components/radioGroup/radio-group.html @@ -0,0 +1,13 @@ +
+ +
+
+ + +
+
+ + +
+
+
diff --git a/components/search-bar/_search-bar.scss b/components/search-bar/_search-bar.scss new file mode 100644 index 0000000..3e2dfad --- /dev/null +++ b/components/search-bar/_search-bar.scss @@ -0,0 +1,61 @@ +$inputHeight: 38px; +.sdc-search-bar{ + .search-bar-container{ + display: flex; + align-items: flex-end; + .sdc-input-wrapper{ + flex-grow: 1; + .sdc-input{ + margin: 0; + .sdc-input__input{ + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + .search-button{ + width: $inputHeight; + height: $inputHeight - 2; + border: solid 1px $light-gray; + border-left: none; + background-color: $light-silver; + cursor: auto; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + + svg{ + height: 20px; + width: 20px; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%,-50% ); + path{ + fill: $gray; + } + } + } + + &.not-empty{ + .sdc-input__input { + border-color: $blue; + } + .search-button{ + background-color: $lighter-blue; + border-color: $blue; + cursor: pointer; + svg path{ + fill: $blue; + } + &:hover { + background-color: $light-blue; + svg{ + path{ + fill: $white; + } + } + } + } + } + } +} diff --git a/components/search-bar/search-bar-with-text.html b/components/search-bar/search-bar-with-text.html new file mode 100644 index 0000000..f623c2f --- /dev/null +++ b/components/search-bar/search-bar-with-text.html @@ -0,0 +1,17 @@ +
+
+ + + + + + + + + + + + +
+
+ diff --git a/components/search-bar/search-bar.html b/components/search-bar/search-bar.html new file mode 100644 index 0000000..d1b9171 --- /dev/null +++ b/components/search-bar/search-bar.html @@ -0,0 +1,16 @@ +
+
+ + + + + + + + + + + + +
+
diff --git a/components/tabs/tabs-disabled.html b/components/tabs/tabs-disabled.html new file mode 100644 index 0000000..5e67f2a --- /dev/null +++ b/components/tabs/tabs-disabled.html @@ -0,0 +1,8 @@ +
+
    + + + +
+
This is the active tab content
+
diff --git a/components/tabs/tabs-header.html b/components/tabs/tabs-header.html new file mode 100644 index 0000000..622dc32 --- /dev/null +++ b/components/tabs/tabs-header.html @@ -0,0 +1,8 @@ +
+
    + + + +
+
This is the active tab content
+
diff --git a/components/tabs/tabs-menu.html b/components/tabs/tabs-menu.html new file mode 100644 index 0000000..753886f --- /dev/null +++ b/components/tabs/tabs-menu.html @@ -0,0 +1,8 @@ +
+
    + + + +
+
This is the active tab content
+
diff --git a/components/tabs/tabs.scss b/components/tabs/tabs.scss new file mode 100644 index 0000000..f5df0ba --- /dev/null +++ b/components/tabs/tabs.scss @@ -0,0 +1,35 @@ +.sdc-tabs { + .sdc-tab { + display: inline-block; + cursor: pointer; + text-transform: capitalize; + color: $dark-gray; + padding: 0px 10px 7px 10px; + margin-right: 20px; + &:last-child { + margin-right: 0; + } + &.sdc-tab-active { + color: $blue; + border-bottom: 2px solid $blue; + } + &[disabled] { + opacity: 0.3; + cursor: default; + } + } + &.sdc-tabs-header { + .sdc-tab { + @include heading-2; + } + } + &.sdc-tabs-menu { + .sdc-tab { + @include body-1; + padding: 0px 10px 4px 10px; + } + } + .sdc-tab-content { + margin-top: 30px; + } +} diff --git a/components/tag-cloud/_tag-cloud.scss b/components/tag-cloud/_tag-cloud.scss new file mode 100644 index 0000000..6a94a10 --- /dev/null +++ b/components/tag-cloud/_tag-cloud.scss @@ -0,0 +1,116 @@ +.sdc-tag-cloud-new-item-field{ + display: flex; + align-items: flex-end; + sdc-input{ + flex-grow: 1; + .sdc-input{ + margin-bottom: 0; + .sdc-input__input{ + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + .not-empty{ + .sdc-input__input { + border-color: $blue; + } + + } + .error{ + .sdc-input__input { + border: solid 1px $red; + color: $red; + outline: none; + } + } + .add-button{ + cursor: pointer; + height: 36px; + width: 36px; + text-align: center; + background-color: $lighter-blue; + border: solid 1px $blue; + border-left: none; + border-top-right-radius: 2px; + &.disabled{ + cursor: default; + background-color: $light-silver; + border-color: $light-gray; + .plus-icon svg g{ + fill: $gray; + } + } + .plus-icon{ + line-height: 46px; + svg{ + height: 20px; + width: 20px; + g{ + fill: $blue; + } + } + } + } + + &.not-empty{ + .add-button:hover{ + background-color: $light-blue; + svg{ + g{ + fill: $white; + } + } + } + } +} + +.sdc-list-container{ + height: 120px; + overflow-y: auto; + border: solid 1px $light-gray; + border-top: none; + border-radius: 2px; + background-color: $white; + padding: 10px 10px 0 0; + .sdc-tag-item{ + padding: 0 0 10px 10px; + display: inline-block; + .tag-item{ + min-width: 100px; + background-color: $white; + border: solid 1px $light-gray; + border-radius: 20px; + height: 28px; + line-height: 28px; + padding: 0 10px; + color: $text-black; + @include body-3; + &.view-only{ + border-color: $silver; + } + .delete-item{ + cursor: pointer; + padding-left: 10px; + float: right; + svg{ + height: 12px; + width: 12px; + margin-top: 8px; + g{ + fill: $dark-gray; + } + } + } + &:hover:not(.view-only){ + background-color: $lighter-blue; + border-color: $lighter-blue; + .delete-item{ + svg g{ + fill: $blue; + } + } + } + } + } +} diff --git a/components/tag-cloud/disabled-list.html b/components/tag-cloud/disabled-list.html new file mode 100644 index 0000000..6091525 --- /dev/null +++ b/components/tag-cloud/disabled-list.html @@ -0,0 +1,31 @@ +
+
+ + +
+
+ + + + + + + + + + +
+
+
+
+
+ aaa +
+
+ +
+
+ bbb +
+
+
diff --git a/components/tag-cloud/list-with-active-add-button.html b/components/tag-cloud/list-with-active-add-button.html new file mode 100644 index 0000000..8bde59f --- /dev/null +++ b/components/tag-cloud/list-with-active-add-button.html @@ -0,0 +1,50 @@ +
+
+ + +
+
+ + + + + + + + + + +
+
+
+
+
+ aaa + + + + + + + + + + +
+
+
+
+ bbb + + + + + + + + + + +
+
+
diff --git a/components/tag-cloud/list-with-some-read-only-items.html b/components/tag-cloud/list-with-some-read-only-items.html new file mode 100644 index 0000000..0db7a07 --- /dev/null +++ b/components/tag-cloud/list-with-some-read-only-items.html @@ -0,0 +1,61 @@ +
+
+ + +
+ +
+ + + + + + + + + + +
+
+
+
+
+ aaa + + + + + + + + + + +
+
+
+
+ bbb +
+
+
+
+ ccc + + + + + + + + + + +
+
+ +
+ ddd +
+ +
diff --git a/components/tag-cloud/list-with-unique-error.html b/components/tag-cloud/list-with-unique-error.html new file mode 100644 index 0000000..14de80c --- /dev/null +++ b/components/tag-cloud/list-with-unique-error.html @@ -0,0 +1,52 @@ +
+
+ + +
+
+ + + + + + + + + + +
+
+
+
+
+ aaa + + + + + + + + + + +
+
+
+
+ bbb + + + + + + + + + + +
+
+
+
This value is already in the list
+ diff --git a/components/tag-cloud/simple-list.html b/components/tag-cloud/simple-list.html new file mode 100644 index 0000000..075751f --- /dev/null +++ b/components/tag-cloud/simple-list.html @@ -0,0 +1,50 @@ +
+
+ + +
+
+ + + + + + + + + + +
+
+
+
+
+ aaa + + + + + + + + + + +
+
+
+
+ bbb + + + + + + + + + + +
+
+
diff --git a/components/tile/_tile.scss b/components/tile/_tile.scss new file mode 100644 index 0000000..80629cf --- /dev/null +++ b/components/tile/_tile.scss @@ -0,0 +1,172 @@ +.sdc-tile { + $tile-full-width: 204px; + $tile-full-height: 204px; + $tile-padding: 10px; + + $header-height: $body-font-1; + $footer-height: 23px; + $content-height: 100%; + + width: $tile-full-width; + height: $tile-full-height; + + padding: $tile-padding; + border: 1px solid $silver; + @include border-radius(2px); + @include box-sizing; + + display: flex; + flex-direction: column; + justify-content: space-between; + + position: relative; + cursor: pointer; + user-select: none; + + background: $white; + color: $text-black; + fill: $dark-gray; + transition: box-shadow 0.3s ease-in-out; + @include body-3; + @include box-shadow(0 1px 4px 0 rgba($text-black, 0.06)); + + &:hover { + border-color: $light-gray; + @include box-shadow( 0 10px 30px 0 rgba($text-black, 0.25)); + } + + .blue { + color: $blue; + fill: $blue; + } + + .purple { + color: $purple; + fill: $purple; + } + + .centered { + &.sdc-tile-footer, .sdc-tile-info-line { + text-align: center; + } + } + + .sdc-tile-header { + height: 1.1em; + line-height: 1em; + @include ellipsis($display: block); + + font-size: $body-font-1; + text-transform: uppercase; + } + + .sdc-tile-content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: $content-height; + + .sdc-tile-content-icon { + margin-top: 27px; + text-align: center; + + svg { + width: 50px; + height: 50px; + + &.__vsp { + width: 60px; + height: 40px; + } + &.__vlm { + width: 45px; + height: 53px; + } + &.__vendor { + width: 53px; + height: 47px; + } + } + } + + .sdc-tile-content-info { + display: flex; + flex-direction: column; + + .sdc-tile-info-line { + text-transform: capitalize; + @include ellipsis($display: inline-block); + + button { + height: 1.67em; + width: initial; + margin-bottom: 5px; + margin-top: 1px; + padding: 0 8px; + font-size: inherit; + } + &.supertitle { + height: 1.1em; + line-height: 1.2; + color: $gray; + } + &.title { + height: 1.6em; + line-height: 1.8; + color: $text-black; + @include heading-5; + } + &.subtitle { + height: 1.5em; + line-height: 1.6; + color: $dark-gray; + } + &:last-child { + margin-bottom: 4px; + } + } + } + } + + .sdc-tile-footer { + height: $footer-height; + @include box-sizing; + + border-top: 1px solid $silver; + padding-top: 8px; + + color: $dark-gray; + fill: $dark-gray; + text-transform: capitalize; + + display: flex; + align-items: center; + justify-content: space-between; + + .sdc-tile-footer-cell { + &:first-child { + @include ellipsis; + } + svg{ + width: 20px; + height: 12px; + } + button { + width: initial; + height: initial; + @include body-2; + + .svg-icon-wrapper { + .svg-icon-label { + font-size: inherit; + } + svg { + width: 9px; + height: 9px; + } + } + } + } + + } +} diff --git a/components/tile/tile-without-footer.html b/components/tile/tile-without-footer.html new file mode 100644 index 0000000..514a19e --- /dev/null +++ b/components/tile/tile-without-footer.html @@ -0,0 +1,14 @@ +
+
Header
+
+
+
+ +
+
+
+
Supertitle
+
Title
+
+
+
diff --git a/components/tile/vendor-tile.html b/components/tile/vendor-tile.html new file mode 100644 index 0000000..ede3fbf --- /dev/null +++ b/components/tile/vendor-tile.html @@ -0,0 +1,26 @@ +
+
+
+
+
+ +
+
+
+
Vendor Name
+
+ +
+
+
+
+ + + +
+
diff --git a/components/tile/vfc-tile.html b/components/tile/vfc-tile.html new file mode 100644 index 0000000..7b4753e --- /dev/null +++ b/components/tile/vfc-tile.html @@ -0,0 +1,17 @@ +
+
VFC
+
+
+
+ +
+
+
+
Title
+
V 1.0
+
+
+
+ Certified +
+
diff --git a/components/tile/vlm-tile.html b/components/tile/vlm-tile.html new file mode 100644 index 0000000..be629a1 --- /dev/null +++ b/components/tile/vlm-tile.html @@ -0,0 +1,22 @@ +
+
VLM
+
+
+
+ +
+
+
+
VLM Name
+
+
+
+ Certified + +
+ + Owner +
+ +
+
diff --git a/components/tile/vsp-tile.html b/components/tile/vsp-tile.html new file mode 100644 index 0000000..1a3dc1d --- /dev/null +++ b/components/tile/vsp-tile.html @@ -0,0 +1,17 @@ +
+
VSP
+
+
+
+ +
+
+
+
VLM
+
VSP Name
+
+
+
+ Draft +
+
diff --git a/components/tooltip/_tooltip.scss b/components/tooltip/_tooltip.scss new file mode 100644 index 0000000..3f255ed --- /dev/null +++ b/components/tooltip/_tooltip.scss @@ -0,0 +1,124 @@ +/* Tooltip animation */ +@keyframes animation-fade-in-from-bottom { + from { + transform: translateY(10px); + opacity: 0; + } + to { + transform: translateY(0px); + opacity: 1; + } +} + +/* Tooltop styles */ +.sdc-tooltip { + @include base-font-regular; + line-height: 14px; + font-size: 12px; + max-width: 223px; + background-color: $black; + color: $white; + text-align: left; + border-radius: 2px; + padding: 5px 11px; + position: absolute; + z-index: 1000; + display: block; + opacity: 0; + transition: opacity 300ms; + border: solid 1px $black; + animation: animation-fade-in-from-bottom .75s ease-in-out; /* tooltip animation */ +} + +.sdc-tooltip-show { + opacity: 1; +} + +.sdc-tooltip::after { + content: ""; + position: absolute; + border-style: solid; +} + +.sdc-tooltip-top::after { + top: 100%; + left: 10px; + margin-left: -5px; + border-width: 5px; + border-color: $black transparent transparent transparent; +} +.sdc-tooltip-top-right__bottom::after { + right: 10px; + left:auto; +} +.sdc-tooltip-top-center__middle::after { + left: 50%; +} + +.sdc-tooltip-bottom::after { + bottom: 100%; + left: 10px; + margin-left: -5px; + border-width: 5px; + border-color: transparent transparent $black transparent; +} +.sdc-tooltip-bottom-right__bottom::after { + right: 10px; + left:auto; +} +.sdc-tooltip-bottom-center__middle::after { + left: 50%; +} + +.sdc-tooltip-left::after { + top: 10px; /*50%;*/ + left: 100%; + margin-top: -5px; + border-width: 5px; + border-color: transparent transparent transparent $black; +} +.sdc-tooltip-left-right__bottom::after { + bottom: 10px; + top: auto; +} +.sdc-tooltip-left-center__middle::after { + top: 50% +} + +.sdc-tooltip-right::after { + top: 10px; + right: 100%; + margin-top: -5px; + border-width: 5px; + border-color: transparent $black transparent transparent; +} +.sdc-tooltip-right-right__bottom::after { + bottom: 10px; + top: auto; +} +.sdc-tooltip-right-center__middle::after { + top: 50% +} + +/* Tooltip template */ +.sdc-tooltip-template-title { + @include base-font-regular; + font-size: 12px; + font-weight: normal; + background-color: $black; + color: $white; /* silver */ +} + +.sdc-tooltip-template-big-title { + font-size: 20px; + line-height: 24px; +} + +.sdc-tooltip-template-content { + @include base-font-regular; + font-size: 12px; + font-weight: normal; + background-color: $black; + color: $white; + line-height: 14px; +} diff --git a/components/validation/_validation.scss b/components/validation/_validation.scss new file mode 100644 index 0000000..771a242 --- /dev/null +++ b/components/validation/_validation.scss @@ -0,0 +1,9 @@ +.sdc-validation { + + font-size: $body-font-4; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 10px; + +} -- cgit 1.2.3-korg