diff options
Diffstat (limited to 'components')
98 files changed, 3076 insertions, 0 deletions
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 @@ +<div class="sdc-accordion "> + <div class="sdc-accordion-header"> + <div class="svg-icon-wrapper bottom"> + <svg class="svg-icon __chevronUp" version="1.1" id="chevron-up_icon" x="0px" y="0px" viewBox="0 0 10 6.3" style="enable-background:new 0 0 10 6.3;" + xml:space="preserve"> + <g transform="translate(0,-952.36218)"> + <path d="M10,958.2c0-0.1,0-0.2-0.1-0.2l-4.6-5.5c-0.1-0.2-0.4-0.2-0.5,0l0,0L0.1,958c-0.1,0.2-0.1,0.4,0,0.5s0.4,0.1,0.5,0l0,0 + l4.3-5.2l4.3,5.2c0.1,0.2,0.4,0.2,0.5,0.1C10,958.5,10,958.3,10,958.2z"> + </path> + </g> + </svg> + </div> + <div class="title"> + Accordion Title + </div> + </div> + <div class="sdc-accordion-body "> + <div> + Accordion body + </div> + </div> +</div>
\ 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 @@ +<div class="sdc-autocomplete-container"> + <div class="search-bar-container"> + <div class="sdc-input"> + <label class="sdc-input__label">search by color:</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="search text"> + </div> + <span class="search-bar-button"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(2 2)"> + <use fill="#000" xlink:href="#search-a"/> + </g> + </svg> + </span> + </div> + <div class="autocomplete-results" style="height: 0px; opacity: 0;"> + + </div> +</div> + 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 @@ +<div class="sdc-autocomplete-container"> + <div class="search-bar-container"> + <div class="sdc-input"> + <label class="sdc-input__label">search by color:</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="search text"> + </div> + <span class="clear-search-x"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use fill="#000" xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + <div class="autocomplete-results"> + <div class="autocomplete-result-item">red</div> + <div class="autocomplete-result-item">yellow</div> + <div class="autocomplete-result-item">orange</div> + <div class="autocomplete-result-item">green</div> + </div> +</div> 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 @@ +<button class="sdc-button sdc-button__link btn-default"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__link" disabled> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__link btn-x-small"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__link btn-large"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__link btn-medium"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__link btn-small"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__link"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary btn-default"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary" disabled> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary btn-x-small"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary btn-large"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary btn-medium"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary btn-small"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__primary"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary btn-default"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary" disabled> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary btn-x-small"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary btn-large"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary btn-medium"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary btn-small"> + Click Me +</button> 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 @@ +<button class="sdc-button sdc-button__secondary"> + Click Me +</button> 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 @@ +<div class="sdc-checkbox"> + <label> + <input type="checkbox" class="sdc-checkbox__input" checked> + <span class="sdc-checkbox__label">This is the checkbox label</span> + </label> +</div> 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 @@ +<div class="sdc-checkbox"> + <label> + <input type="checkbox" class="sdc-checkbox__input" checked disabled> + <span class="sdc-checkbox__label">This is the checkbox label</span> + </label> +</div> 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 @@ +<div class="sdc-checkbox"> + <label> + <input type="checkbox" class="sdc-checkbox__input" disabled> + <span class="sdc-checkbox__label">This is the checkbox label</span> + </label> +</div> 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 @@ +<div class="sdc-checkbox"> + <label> + <input type="checkbox" class="sdc-checkbox__input"> + <span class="sdc-checkbox__label">This is the checkbox label</span> + </label> +</div> 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,<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M2,0 L12,-2.22044605e-16 C13.1045695,5.56104062e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 8.94280938e-16,13.1045695 -2.22044605e-16,12 L-2.22044605e-16,2 C-3.57315355e-16,0.8954305 0.8954305,-1.91384796e-17 2,-2.22044605e-16 Z" id="path-1"></path><rect id="path-2" x="3" y="6" width="8" height="2" rx="1"></rect></defs><g id="Symbols-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="icons/checkbox/semiselected"><g id="form/checkbox_checked-copy-3"><g id="Rectangle-Copy-2"><use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use><path stroke="#D2D2D2" stroke-width="1" d="M2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,12 C0.5,12.8284271 1.17157288,13.5 2,13.5 L12,13.5 C12.8284271,13.5 13.5,12.8284271 13.5,12 L13.5,2 C13.5,1.17157288 12.8284271,0.5 12,0.5 L2,0.5 Z"></path></g></g><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Mask" fill="#009FDB" xlink:href="#path-2"></use></g></g></svg>'); + } + } +} +.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 @@ +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox" checked> + <label class="sdc-checkbox__label">apple</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">banana</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox" checked> + <label class="sdc-checkbox__label">orange</label> + </div> + </div> +</div> 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 @@ +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox" disabled> + <label class="sdc-checkbox__label">apple</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox" disabled> + <label class="sdc-checkbox__label">banana</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">orange</label> + </div> + </div> +</div> + 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 @@ +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">apple</label> + </div> + </div> + <div class="checkbox-sublist"> + <div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">red</label> + </div> + </div> + </div> + <div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">green</label> + </div> + </div> + </div> + <div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">yellow</label> + </div> + </div> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">banana</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">orange</label> + </div> + </div> +</div> 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 @@ +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">apple</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">banana</label> + </div> + </div> +</div> +<div> + <div class="checkbox-item"> + <div class="sdc-checkbox"> + <input class="sdc-checkbox__input" type="checkbox"> + <label class="sdc-checkbox__label">orange</label> + </div> + </div> +</div> 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 @@ +<div class="sdc-dropdown"> + <label class="sdc-dropdown__label">DropDown example</label> + <button class="sdc-dropdown__header disabled">Please choose option</button> + <!--[This part won't be created on disabled drop-down]--> + <ul class="sdc-dropdown__options-list"> + <li class="sdc-dropdown__option selected">First Option</li> + <li class="sdc-dropdown__option">Second Option</li> + <li class="sdc-dropdown__option">Third Option</li> + </ul> + <!--[...]--> +</div> 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 @@ +<div class="sdc-dropdown"> + <label class="sdc-dropdown__label">DropDown example</label> + <button class="sdc-dropdown__header">Please choose option</button> + <ul class="sdc-dropdown__options-list"> + <li class="sdc-dropdown__option sdc-dropdown__option--group sdc-dropdown__option--header">Group 1 title</li> + <li class="sdc-dropdown__option sdc-dropdown__option--group selected">First Option</li> + <li class="sdc-dropdown__option sdc-dropdown__option--group">Second Option</li> + <li class="sdc-dropdown__option sdc-dropdown__option--group">Third Option</li> + </ul> +</div> 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 @@ +<div class="sdc-dropdown"> + <label class="sdc-dropdown__label">DropDown example</label> + <button class="sdc-dropdown__header">Please choose option</button> + <ul class="sdc-dropdown__options-list"> + <li class="sdc-dropdown__option selected">First Option</li> + <li class="sdc-dropdown__option">Second Option</li> + <li class="sdc-dropdown__option">Third Option</li> + </ul> + <div class="sdc-dropdown__error"> + <!--[Will be replaced by the correct error icon]--> + <svg class="svg-icon __exclamationTriangleFull" version="1.1" id="exclamation-triangle-full_icon" x="0px" y="0px" viewBox="0 0 19.9 18" xml:space="preserve"><path class="sdc-dropdown__error--icon" d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8 + c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2 + c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5 + s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z"></path></svg> + Error message! + </div> +</div> + 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 @@ +<div class="sdc-dropdown"> + <label class="sdc-dropdown__label">DropDown example</label> + <button class="sdc-dropdown__header">Please choose option</button> + <ul class="sdc-dropdown__options-list"> + <li class="sdc-dropdown__option selected">First Option</li> + <li class="sdc-dropdown__option">Second Option</li> + <li class="sdc-dropdown__option">Third Option</li> + </ul> +</div> 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 @@ +<div class="sdc-filter-bar"> + <div class="search-bar-container"> + <label class="sdc-input__label">search box example:</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="search text"> + <span class="filter-button clear-search-x"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use fill="#000" xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> +</div> 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 @@ +<div class="sdc-filter-bar"> + <div class="search-bar-container"> + <label class="sdc-input__label">search box example:</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="search text"> + <span class="filter-button magnify-button"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(2 2)"> + <use fill="#000" xlink:href="#search-a"/> + </g> + </svg> + </span> + </div> +</div> + 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 @@ +<div class="sdc-input __disabled"> + <label class="sdc-input__label">I am a label</label> + <input class="sdc-input__input" type="text" disabled value="Default"/> +</div> 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 @@ +<div class="sdc-input"> + <label class="sdc-input__label">I am a label</label> + <input class="sdc-input__input error" type="text" value="Default"/> + <div class="sdc-label__error "> + <div class="svg-icon-wrapper __negative"> + <svg class="svg-icon __exclamationTriangleFull __negative" version="1.1" id="exclamation-triangle-full_icon" x="0px" y="0px" viewBox="0 0 19.9 18" style="enable-background:new 0 0 19.9 18;" xml:space="preserve"> + <path d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8 + c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2 + c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5 + s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z"> + </path> + </svg> + <span class="svg-icon-label __negative">This is the error message. + </span> + </div> + </div> +</div>
\ 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 @@ +<div class="sdc-input"> + <label class="sdc-input__label">I am a label</label> + <div> + <input class="sdc-input__input" type="number"/> + </div> +</div>
\ 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 @@ +<div class="sdc-input"> + <label class="sdc-input__label">I am a label</label> + <input class="sdc-input__input" placeholder="Write Here..." type="text"/> +</div> 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 @@ +<div class="sdc-input"> + <label class="sdc-input__label required">I am a label</label> + <input class="sdc-input__input" value="Default" type="text"/> +</div> 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 @@ +<div class="sdc-input"> + <label class="sdc-input__label">I am a label</label> + <input class="sdc-input__input view-only" type="text" value="Default"/> +</div>
\ 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 @@ +<div class="sdc-input"> + <label class="sdc-input__label">I am a label</label> + <input + class="sdc-input__input" + value="Default" + type="text" + /> +</div>
\ 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 @@ + +<ul class="sdc-menu-list static"> + <li class="sdc-menu-item selected">item 1 (selected)</li> + <li class="sdc-menu-item disabled">item 2</li> + <li class="separator"/> + <li class="sdc-menu-item">item 3</li> + <li class="sdc-menu-item">custom action</li> +</ul>
\ 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 @@ +<div class="sdc-popup-menu"> + <ul class="sdc-menu-list relative" style="top: 10px; left: 10px;"> + <li class="sdc-menu-item selected">item 1 (selected)</li> + <li class="sdc-menu-item disabled">item 2</li> + <li class="separator"/> + <li class="sdc-menu-item">item 3</li> + </ul> +</div>
\ 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 @@ +<div class="sdc-modal sm"> + <div class="sdc-modal__wrapper sdc-modal-type-alert"> + <div class="sdc-modal__header"> + <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom"> + <svg class="svg-icon __exclamationTriangleLine" version="1.1" id="exclamation-triangle-line_icon" x="0px" y="0px" viewBox="0 0 19.9 18" xml:space="preserve"> + <g> + <path d="M17.6,18H2.4c-0.5,0-0.9-0.1-1.3-0.4c-0.5-0.3-0.9-0.8-1.1-1.4c-0.2-0.6-0.1-1.3,0.2-1.8l7.6-13c0.2-0.3,0.5-0.7,0.9-1 + C9.3,0,10-0.1,10.6,0.1c0.6,0.2,1.1,0.6,1.4,1.2l7.5,13c0.2,0.4,0.4,0.8,0.4,1.3C19.9,16.9,18.9,18,17.6,18z M9.9,1 + C9.7,1,9.4,1.1,9.2,1.2C9.1,1.3,8.9,1.6,8.7,1.8l-7.5,13C1,15.1,1,15.5,1,15.9c0.1,0.4,0.3,0.7,0.6,0.8C1.9,16.9,2.1,17,2.4,17 + h15.1c0.9,0,1.4-0.7,1.4-1.4c0-0.2-0.1-0.5-0.2-0.7l0,0l-7.6-13c-0.2-0.4-0.5-0.6-0.8-0.7C10.2,1,10.1,1,9.9,1z"></path> + <g> + <g> + <g> + <path d="M10,10.4L10,10.4c-0.3,0-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,5.2 + C10.5,10.2,10.2,10.4,10,10.4z"></path> + </g> + </g> + <g> + <g> + <path d="M10,14.7L10,14.7c-0.3,0-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,1 + C10.5,14.5,10.2,14.7,10,14.7z"></path> + </g> + </g> + </g> + </g> + </svg> + </div> + <div class="title ">Title</div> + <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button clickable bottom"> + <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve"> + <g transform="translate(0,-952.36218)"> + <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0 + l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1 + c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path> + </g> + </svg> + </div> + </div> + <div class="sdc-modal__content ">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</div> + <div class="sdc-modal__footer"> + <div><button class="sdc-button sdc-button__primary ">Ok</button></div> + </div> + </div> +</div> +<div class="modal-background"></div>
\ 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 @@ +<div class="sdc-modal md"> + <div class="sdc-modal__wrapper sdc-modal-type-custom"> + <div class="sdc-custom__header sdc-modal__header"> + <div class="title ">Title</div> + <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button clickable bottom"> + <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve"> + <g transform="translate(0,-952.36218)"> + <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0 + l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1 + c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path> + </g> + </svg> + </div> + </div> + <div class="sdc-modal__content "> + <div> + <div class="sdc-input "><label class="sdc-input__label " for="input1">I am a label</label><input type="text" class="sdc-input__input " id="input1" name="input1" value="Default"></div> + <div class="sdc-input "><label class="sdc-input__label " for="input1">I am a label</label><input type="text" class="sdc-input__input " id="input1" name="input1" value="Default"></div> + <div class="sdc-input "><label class="sdc-input__label " for="input1">I am a label</label><input type="text" class="sdc-input__input " id="input1" name="input1" value="Default"></div> + </div> + </div> + <div class="sdc-modal__footer"> + <div><button class="sdc-button sdc-button__primary ">Ok</button><button class="sdc-button sdc-button__secondary">Close</button></div> + </div> + </div> +</div> +<div class="modal-background"></div>
\ 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 @@ +<div class="sdc-modal sm"> + <div class="sdc-modal__wrapper sdc-modal-type-error"> + <div class="sdc-modal__header"> + <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom"> + <svg class="svg-icon __error" viewBox="0 0 17 17"> + <title>error</title> + <g id="Layer_2" data-name="Layer 2"> + <g id="Layer_1-2" data-name="Layer 1"> + <path d="M8.5,1A7.5,7.5,0,1,1,1,8.5,7.51,7.51,0,0,1,8.5,1m0-1A8.5,8.5,0,1,0,17,8.5,8.5,8.5,0,0,0,8.5,0Z"></path> + <polygon points="11.6 6.1 10.9 5.4 8.5 7.79 6.1 5.4 5.4 6.1 7.79 8.5 5.4 10.9 6.1 11.6 8.5 9.21 10.9 11.6 11.6 10.9 9.21 8.5 11.6 6.1"></polygon> + </g> + </g> + </svg> + </div> + <div class="title ">Title</div> + <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button clickable bottom"> + <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve"> + <g transform="translate(0,-952.36218)"> + <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0 + l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1 + c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path> + </g> + </svg> + </div> + </div> + <div class="sdc-modal__content ">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</div> + <div class="sdc-modal__footer"> + <div><button class="sdc-button sdc-button__primary ">Ok</button></div> + </div> + </div> +</div> +<div class="modal-background"></div>
\ 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 @@ +<div class="sdc-modal sm"> + <div class="sdc-modal__wrapper sdc-modal-type-info"> + <div class="sdc-modal__header"> + <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom"> + <svg class="svg-icon __errorCircle" id="error-circle_icon" viewBox="0 0 16 16"> + <title> + Asset 4 + </title> + <g id="Layer_2" data-name="Layer 2"> + <g id="Layer_1-2" data-name="Layer 1"> + <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm.9,12.4H7.1V10.6H8.9Zm0-3.6H7.1V3.5H8.9Z"> + </path> + </g> + </g> + </svg> + </div> + <div class="title "> + Standard Modal + </div> + <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom"> + <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" style="enable-background:new 0 0 10.1 10.1;" xml:space="preserve"> + <g transform="translate(0,-952.36218)"> + <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0 + l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1 + c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"> + </path> + </g> + </svg> + </div> + </div> + <div class="sdc-modal__content "> + 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 + </div> + <div class="sdc-modal__footer"> + <div> + <button class="sdc-button sdc-button__primary "> + Yes + </button> + <button class="sdc-button sdc-button__secondary "> + Close + </button> + </div> + </div> + </div> + </div> + <div class="modal-background"></div> 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 @@ +<div class="sdc-notification"> + +</div> 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 @@ +<div class="sdc-panel"> + <h3> + Panel + </h3> + <div class="sdc-checkbox"> + <label> + <input type="checkbox" class="sdc-checkbox__input" /> + <span class="sdc-checkbox__label"> + filter-item + </span> + </label> + </div> + <div class="sdc-checkbox "> + <label> + <input type="checkbox" class="sdc-checkbox__input" checked="" /> + <span class="sdc-checkbox__label"> + filter-item-checked + </span> + </label> + </div> +</div>
\ 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 @@ +<div class="sdc-radio"> + <input type="radio" name="grp1" checked class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">This is the radio label</label> +</div> 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 @@ +<div class="sdc-radio"> + <input type="radio" name="grp3" checked class="sdc-radio__input" value="1" disabled> + <label class="sdc-radio__label">This is the radio label</label> +</div> 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 @@ +<div class="sdc-radio"> + <input type="radio" name="grp2" class="sdc-radio__input" value="1" disabled> + <label class="sdc-radio__label">This is the radio label</label> +</div> 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 @@ +<div class="sdc-radio"> + <input type="radio" name="grp4" class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">This is the radio label</label> +</div> 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 @@ +<div class='sdc-radio-group'> + <label class='sdc-radio-group__legend'>Group D</label> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp4" class="sdc-radio__input" value="1" disabled> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp4" class="sdc-radio__input" value="2" disabled> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> 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 @@ +<div class='sdc-radio-group'> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp5" class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp5" class="sdc-radio__input" value="2"> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> 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 @@ +<div class='sdc-radio-group'> + <label class='sdc-radio-group__legend'>Group B</label> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp2" checked class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp2" class="sdc-radio__input" value="2"> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> 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 @@ +<div class='sdc-radio-group'> + <label class='sdc-radio-group__legend'>Group C</label> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp3" class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp3" class="sdc-radio__input" value="2"> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> 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 @@ +<div class="sdc-search-bar"> + <div class="search-bar-container not-empty"> + <label class="sdc-input__label">search box example:</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="search text"> + <span class="search-button magnify-button"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(2 2)"> + <use fill="#000" xlink:href="#search-a"/> + </g> + </svg> + </span> + </div> +</div> + 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 @@ +<div class="sdc-search-bar"> + <div class="search-bar-container"> + <label class="sdc-input__label">search box example:</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="search text"> + <span class="search-button magnify-button"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="search-a" d="M2,8.5 C2,4.9 4.9,2 8.5,2 C12.1,2 15,4.9 15,8.5 C15,10.3 14.3,11.9 13.1,13.1 C11.9,14.3 10.3,15 8.5,15 C4.9,15 2,12.1 2,8.5 M19.7,18.3 L15.2,13.8 C16.3,12.4 17,10.5 17,8.5 C17,3.8 13.2,0 8.5,0 C3.8,0 0,3.8 0,8.5 C0,13.2 3.8,17 8.5,17 C10.5,17 12.3,16.3 13.8,15.2 L18.3,19.7 C18.5,19.9 18.8,20 19,20 C19.2,20 19.5,19.9 19.7,19.7 C20.1,19.3 20.1,18.7 19.7,18.3"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(2 2)"> + <use fill="#000" xlink:href="#search-a"/> + </g> + </svg> + </span> + </div> +</div> 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 @@ +<div class="sdc-tabs sdc-tabs-header"> + <ul class="sdc-tabs-list" role="tablist"> + <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li> + <li class="sdc-tab" role="tab" disabled>tab 2</li> + <li class="sdc-tab" role="tab" disabled>tab 3</li> + </ul> + <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div> +</div> 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 @@ +<div class="sdc-tabs sdc-tabs-header"> + <ul class="sdc-tabs-list" role="tablist"> + <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li> + <li class="sdc-tab" role="tab">tab 2</li> + <li class="sdc-tab" role="tab">tab 3</li> + </ul> + <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div> +</div> 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 @@ +<div class="sdc-tabs sdc-tabs-menu"> + <ul class="sdc-tabs-list" role="tablist"> + <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li> + <li class="sdc-tab" role="tab">tab 2</li> + <li class="sdc-tab" role="tab">tab 3</li> + </ul> + <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div> +</div> 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 @@ +<div class="sdc-tag-cloud-new-item-field"> + <div class="sdc-input"> + <label class="sdc-input__label">Please Enter value</label> + <input class="sdc-input__input disabled" type="text" name="undefined" placeholder="Type a value and then click enter or '+'" disabled="disabled"> + </div> + <div class="add-button disabled"> + <span class="plus-icon"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(4 4)"> + <use xlink:href="#add-a"/> + </g> + </svg> + </span> + </div> +</div> +<div class="sdc-list-container"> + <div class="sdc-tag-item"> + <div class="tag-item view-only"> + <span>aaa</span> + </div> + </div> + + <div class="sdc-tag-item"> + <div class="tag-item view-only"> + <span>bbb</span> + </div> + </div> +</div> 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 @@ +<div class="sdc-tag-cloud-new-item-field"> + <div class="sdc-input"> + <label class="sdc-input__label">Please Enter value</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'"> + </div> + <div class="add-button"> + <span class="plus-icon"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(4 4)"> + <use xlink:href="#add-a"/> + </g> + </svg> + </span> + </div> +</div> +<div class="sdc-list-container"> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>aaa</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>bbb</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> +</div> 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 @@ +<div class="sdc-tag-cloud-new-item-field"> + <div class="sdc-input"> + <label class="sdc-input__label">Please Enter value</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'"> + </div> + + <div class="add-button disabled"> + <span class="plus-icon"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(4 4)"> + <use xlink:href="#add-a"/> + </g> + </svg> + </span> + </div> +</div> +<div class="sdc-list-container"> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>aaa</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> + <div class="sdc-tag-item"> + <div class="tag-item view-only"> + <span>bbb</span> + </div> + </div> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>ccc</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> + <tag class="sdc-tag-item"> + <div class="tag-item view-only"> + <span>ddd</span> + </div> + </tag> +</div> 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 @@ +<div class="sdc-tag-cloud-new-item-field"> + <div class="sdc-input"> + <label class="sdc-input__label">Please Enter value</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'"> + </div> + <div class="add-button disabled"> + <span class="plus-icon"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(4 4)"> + <use xlink:href="#add-a"/> + </g> + </svg> + </span> + </div> +</div> +<div class="sdc-list-container"> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>aaa</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>bbb</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> +</div> +<div class="error-message">This value is already in the list</div> + 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 @@ +<div class="sdc-tag-cloud-new-item-field"> + <div class="sdc-input"> + <label class="sdc-input__label">Please Enter value</label> + <input class="sdc-input__input" type="text" name="undefined" placeholder="Type a value and then click enter or '+'"> + </div> + <div class="add-button disabled"> + <span class="plus-icon"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(4 4)"> + <use xlink:href="#add-a"/> + </g> + </svg> + </span> + </div> +</div> +<div class="sdc-list-container"> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>aaa</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> + <div class="sdc-tag-item"> + <div class="tag-item"> + <span>bbb</span> + <span class="delete-item"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <defs> + <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/> + </defs> + <g fill="none" fill-rule="evenodd"> + <use xlink:href="#close-a"/> + </g> + </svg> + </span> + </div> + </div> +</div> 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 @@ +<div class="sdc-tile"> + <div class="sdc-tile-header blue">Header</div> + <div class="sdc-tile-content"> + <div class="sdc-tile-content-icon blue"> + <div class="svg-icon-wrapper"> + <!-- insert SVG --> + </div> + </div> + <div class="sdc-tile-content-info"> + <div class="sdc-tile-info-line supertitle">Supertitle</div> + <div class="sdc-tile-info-line title">Title</div> + </div> + </div> +</div> 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 @@ +<div class="sdc-tile"> + <div class="sdc-tile-header"></div> + <div class="sdc-tile-content"> + <div class="sdc-tile-content-icon dark-gray"> + <div class="svg-icon-wrapper"> + <!-- insert SVG --> + </div> + </div> + <div class="sdc-tile-content-info centered"> + <div class="sdc-tile-info-line title">Vendor Name</div> + <div class="sdc-tile-info-line"> + <button class="sdc-button sdc-button-outline-rounded sdc-button__dark-gray">100 VSPs</button> + </div> + </div> + </div> + <div class="sdc-tile-footer centered"> + <span class="sdc-tile-footer-cell"> + <button class="sdc-button sdc-button-link sdc-button__primary sdc-button__with-icon"> + <div class="svg-icon-wrapper sdc-button-icon right"> + <!-- insert SVG --> + <span class="svg-icon-label sdc-button-label">Create new VSP</span> + </div> + </button> + </span> + </div> +</div> 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 @@ +<div class="sdc-tile"> + <div class="sdc-tile-header purple">VFC</div> + <div class="sdc-tile-content"> + <div class="sdc-tile-content-icon"> + <div class="svg-icon-wrapper"> + <!-- insert SVG --> + </div> + </div> + <div class="sdc-tile-content-info"> + <div class="sdc-tile-info-line title">Title</div> + <div class="sdc-tile-info-line subtitle">V 1.0</div> + </div> + </div> + <div class="sdc-tile-footer"> + <span class="sdc-tile-footer-cell">Certified</span> + </div> +</div> 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 @@ +<div class="sdc-tile"> + <div class="sdc-tile-header purple">VLM</div> + <div class="sdc-tile-content"> + <div class="sdc-tile-content-icon purple"> + <div class="svg-icon-wrapper"> + <!-- insert SVG --> + </div> + </div> + <div class="sdc-tile-content-info"> + <div class="sdc-tile-info-line title">VLM Name</div> + </div> + </div> + <div class="sdc-tile-footer"> + <span class="sdc-tile-footer-cell">Certified</span> + <span class="sdc-tile-footer-cell"> + <div class="svg-icon-wrapper left"> + <!-- insert SVG --> + <span class="svg-icon-label">Owner</span> + </div> + </span> + </div> +</div> 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 @@ +<div class="sdc-tile"> + <div class="sdc-tile-header blue">VSP</div> + <div class="sdc-tile-content"> + <div class="sdc-tile-content-icon blue"> + <div class="svg-icon-wrapper"> + <!-- insert SVG --> + </div> + </div> + <div class="sdc-tile-content-info"> + <div class="sdc-tile-info-line supertitle">VLM</div> + <div class="sdc-tile-info-line title">VSP Name</div> + </div> + </div> + <div class="sdc-tile-footer"> + <span class="sdc-tile-footer-cell">Draft</span> + </div> +</div> 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; + +} |