diff options
Diffstat (limited to 'components')
98 files changed, 0 insertions, 3076 deletions
diff --git a/components/accordion/accordion-basic.html b/components/accordion/accordion-basic.html deleted file mode 100644 index fe85473..0000000 --- a/components/accordion/accordion-basic.html +++ /dev/null @@ -1,22 +0,0 @@ -<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 deleted file mode 100644 index ef65b9c..0000000 --- a/components/accordion/accordion.scss +++ /dev/null @@ -1,50 +0,0 @@ -.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 deleted file mode 100644 index 7275156..0000000 --- a/components/autocomplete/_autocomplete.scss +++ /dev/null @@ -1,43 +0,0 @@ -.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 deleted file mode 100644 index 93946bb..0000000 --- a/components/autocomplete/autocomlete-close.html +++ /dev/null @@ -1,22 +0,0 @@ -<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 deleted file mode 100644 index 01b1f40..0000000 --- a/components/autocomplete/autocomplete-open.html +++ /dev/null @@ -1,24 +0,0 @@ -<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 deleted file mode 100644 index 3c21a45..0000000 --- a/components/button/_button.scss +++ /dev/null @@ -1,168 +0,0 @@ -.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 deleted file mode 100644 index 22ac4c8..0000000 --- a/components/button/button-link-auto.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 9267620..0000000 --- a/components/button/button-link-disabled.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 245f885..0000000 --- a/components/button/button-link-extra-small.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 6d1780c..0000000 --- a/components/button/button-link-large.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index cb0293d..0000000 --- a/components/button/button-link-medium.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 5c195fa..0000000 --- a/components/button/button-link-small.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 5c2070b..0000000 --- a/components/button/button-link.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 125276f..0000000 --- a/components/button/button-primary-auto.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index b2ef842..0000000 --- a/components/button/button-primary-disabled.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index a3be965..0000000 --- a/components/button/button-primary-extra-small.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index c0a41b1..0000000 --- a/components/button/button-primary-large.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 9ddedc5..0000000 --- a/components/button/button-primary-medium.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 847f753..0000000 --- a/components/button/button-primary-small.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index b1524bf..0000000 --- a/components/button/button-primary.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index a183ad8..0000000 --- a/components/button/button-secondary-auto.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 4125328..0000000 --- a/components/button/button-secondary-disabled.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 92c4784..0000000 --- a/components/button/button-secondary-extra-small.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 958c151..0000000 --- a/components/button/button-secondary-large.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 67f9741..0000000 --- a/components/button/button-secondary-medium.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index d9d8cd7..0000000 --- a/components/button/button-secondary-small.html +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 64967cc..0000000 --- a/components/button/button-secondary.html +++ /dev/null @@ -1,3 +0,0 @@ -<button class="sdc-button sdc-button__secondary"> - Click Me -</button> diff --git a/components/checkbox/_checkbox.scss b/components/checkbox/_checkbox.scss deleted file mode 100644 index c35c8e0..0000000 --- a/components/checkbox/_checkbox.scss +++ /dev/null @@ -1,66 +0,0 @@ -.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 deleted file mode 100644 index de0c0d8..0000000 --- a/components/checkbox/checkbox-checked.html +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 53e77ec..0000000 --- a/components/checkbox/checkbox-disabled-checked.html +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 2425218..0000000 --- a/components/checkbox/checkbox-disabled.html +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 9cc3d1c..0000000 --- a/components/checkbox/checkbox-unchecked.html +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 248993d..0000000 --- a/components/checklist/_checklist.scss +++ /dev/null @@ -1,21 +0,0 @@ -$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 deleted file mode 100644 index e1adbd7..0000000 --- a/components/checklist/checklist-with-checked-items.html +++ /dev/null @@ -1,24 +0,0 @@ -<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 deleted file mode 100644 index f001ec1..0000000 --- a/components/checklist/checklist-with-disabled-items.html +++ /dev/null @@ -1,25 +0,0 @@ -<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 deleted file mode 100644 index 9aa136e..0000000 --- a/components/checklist/multi-levels-checklist.html +++ /dev/null @@ -1,50 +0,0 @@ -<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 deleted file mode 100644 index 1fe55da..0000000 --- a/components/checklist/simple-checklist.html +++ /dev/null @@ -1,24 +0,0 @@ -<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 deleted file mode 100644 index 908bbaa..0000000 --- a/components/dropdown/_dropdown.scss +++ /dev/null @@ -1,346 +0,0 @@ -.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 deleted file mode 100644 index 9e0bd86..0000000 --- a/components/dropdown/dropdown-disabled.html +++ /dev/null @@ -1,11 +0,0 @@ -<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 deleted file mode 100644 index 3e32f16..0000000 --- a/components/dropdown/dropdown-groups.html +++ /dev/null @@ -1,10 +0,0 @@ -<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 deleted file mode 100644 index 4fd555d..0000000 --- a/components/dropdown/dropdown-requiered.html +++ /dev/null @@ -1,18 +0,0 @@ -<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 deleted file mode 100644 index 440f70b..0000000 --- a/components/dropdown/dropdown.html +++ /dev/null @@ -1,9 +0,0 @@ -<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 deleted file mode 100644 index f48a3df..0000000 --- a/components/filter-bar/_filter-bar.scss +++ /dev/null @@ -1,51 +0,0 @@ -$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 deleted file mode 100644 index de7a225..0000000 --- a/components/filter-bar/filter-bar-with-text.html +++ /dev/null @@ -1,16 +0,0 @@ -<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 deleted file mode 100644 index 90f580d..0000000 --- a/components/filter-bar/filter-bar.html +++ /dev/null @@ -1,17 +0,0 @@ -<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 deleted file mode 100644 index cd94eb7..0000000 --- a/components/icon/_icon.scss +++ /dev/null @@ -1,250 +0,0 @@ -@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 deleted file mode 100644 index a84d312..0000000 --- a/components/input/_input.scss +++ /dev/null @@ -1,78 +0,0 @@ -.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 deleted file mode 100644 index bea21b4..0000000 --- a/components/input/input-disabled.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index aafee55..0000000 --- a/components/input/input-error.html +++ /dev/null @@ -1,17 +0,0 @@ -<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 deleted file mode 100644 index 59ef93c..0000000 --- a/components/input/input-number.html +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index b07d75d..0000000 --- a/components/input/input-placeholder.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index f9dbb16..0000000 --- a/components/input/input-required.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 4381b22..0000000 --- a/components/input/input-view-only.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index ef2ba61..0000000 --- a/components/input/input.html +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index fe32f32..0000000 --- a/components/menu/_menu.scss +++ /dev/null @@ -1,68 +0,0 @@ -.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 deleted file mode 100644 index f4f1cbd..0000000 --- a/components/menu/popup-menu.html +++ /dev/null @@ -1,8 +0,0 @@ - -<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 deleted file mode 100644 index e5a5449..0000000 --- a/components/menu/relative-popup-menu.html +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index e87e516..0000000 --- a/components/modal/_modal.scss +++ /dev/null @@ -1,194 +0,0 @@ -.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 deleted file mode 100644 index 1ed72e8..0000000 --- a/components/modal/alert-modal.html +++ /dev/null @@ -1,45 +0,0 @@ -<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 deleted file mode 100644 index 1011ca6..0000000 --- a/components/modal/custom-modal.html +++ /dev/null @@ -1,27 +0,0 @@ -<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 deleted file mode 100644 index 5a3b5fb..0000000 --- a/components/modal/error-modal.html +++ /dev/null @@ -1,32 +0,0 @@ -<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 deleted file mode 100644 index e367900..0000000 --- a/components/modal/standard-modal.html +++ /dev/null @@ -1,46 +0,0 @@ -<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 deleted file mode 100644 index dafe8d4..0000000 --- a/components/notification/_notification.scss +++ /dev/null @@ -1,59 +0,0 @@ -@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 deleted file mode 100644 index 6eab4c0..0000000 --- a/components/notification/notification-info.html +++ /dev/null @@ -1,3 +0,0 @@ -<div class="sdc-notification"> - -</div> diff --git a/components/notifications-container/_notifications-container.scss b/components/notifications-container/_notifications-container.scss deleted file mode 100644 index 7a7a907..0000000 --- a/components/notifications-container/_notifications-container.scss +++ /dev/null @@ -1,8 +0,0 @@ -.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 deleted file mode 100644 index 14e6461..0000000 --- a/components/panel/basic-panel.html +++ /dev/null @@ -1,21 +0,0 @@ -<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 deleted file mode 100644 index 921dd74..0000000 --- a/components/panel/panel.scss +++ /dev/null @@ -1,8 +0,0 @@ -.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 deleted file mode 100644 index 9c51846..0000000 --- a/components/radio/_radio.scss +++ /dev/null @@ -1,69 +0,0 @@ -.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 deleted file mode 100644 index 78283b3..0000000 --- a/components/radio/radio-checked.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 9ba6f0c..0000000 --- a/components/radio/radio-disabled-checked.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 332435f..0000000 --- a/components/radio/radio-disabled.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 6f6a00d..0000000 --- a/components/radio/radio-unchecked.html +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 6b33a79..0000000 --- a/components/radioGroup/_radioGroup.scss +++ /dev/null @@ -1,20 +0,0 @@ -.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 deleted file mode 100644 index 3cdedc0..0000000 --- a/components/radioGroup/radio-group-disabled.html +++ /dev/null @@ -1,13 +0,0 @@ -<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 deleted file mode 100644 index 76217fe..0000000 --- a/components/radioGroup/radio-group-no-title.html +++ /dev/null @@ -1,12 +0,0 @@ -<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 deleted file mode 100644 index ac604a6..0000000 --- a/components/radioGroup/radio-group-value.html +++ /dev/null @@ -1,13 +0,0 @@ -<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 deleted file mode 100644 index baa1444..0000000 --- a/components/radioGroup/radio-group.html +++ /dev/null @@ -1,13 +0,0 @@ -<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 deleted file mode 100644 index 3e2dfad..0000000 --- a/components/search-bar/_search-bar.scss +++ /dev/null @@ -1,61 +0,0 @@ -$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 deleted file mode 100644 index f623c2f..0000000 --- a/components/search-bar/search-bar-with-text.html +++ /dev/null @@ -1,17 +0,0 @@ -<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 deleted file mode 100644 index d1b9171..0000000 --- a/components/search-bar/search-bar.html +++ /dev/null @@ -1,16 +0,0 @@ -<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 deleted file mode 100644 index 5e67f2a..0000000 --- a/components/tabs/tabs-disabled.html +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index 622dc32..0000000 --- a/components/tabs/tabs-header.html +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index 753886f..0000000 --- a/components/tabs/tabs-menu.html +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index f5df0ba..0000000 --- a/components/tabs/tabs.scss +++ /dev/null @@ -1,35 +0,0 @@ -.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 deleted file mode 100644 index 6a94a10..0000000 --- a/components/tag-cloud/_tag-cloud.scss +++ /dev/null @@ -1,116 +0,0 @@ -.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 deleted file mode 100644 index 6091525..0000000 --- a/components/tag-cloud/disabled-list.html +++ /dev/null @@ -1,31 +0,0 @@ -<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 deleted file mode 100644 index 8bde59f..0000000 --- a/components/tag-cloud/list-with-active-add-button.html +++ /dev/null @@ -1,50 +0,0 @@ -<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 deleted file mode 100644 index 0db7a07..0000000 --- a/components/tag-cloud/list-with-some-read-only-items.html +++ /dev/null @@ -1,61 +0,0 @@ -<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 deleted file mode 100644 index 14de80c..0000000 --- a/components/tag-cloud/list-with-unique-error.html +++ /dev/null @@ -1,52 +0,0 @@ -<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 deleted file mode 100644 index 075751f..0000000 --- a/components/tag-cloud/simple-list.html +++ /dev/null @@ -1,50 +0,0 @@ -<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 deleted file mode 100644 index 80629cf..0000000 --- a/components/tile/_tile.scss +++ /dev/null @@ -1,172 +0,0 @@ -.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 deleted file mode 100644 index 514a19e..0000000 --- a/components/tile/tile-without-footer.html +++ /dev/null @@ -1,14 +0,0 @@ -<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 deleted file mode 100644 index ede3fbf..0000000 --- a/components/tile/vendor-tile.html +++ /dev/null @@ -1,26 +0,0 @@ -<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 deleted file mode 100644 index 7b4753e..0000000 --- a/components/tile/vfc-tile.html +++ /dev/null @@ -1,17 +0,0 @@ -<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 deleted file mode 100644 index be629a1..0000000 --- a/components/tile/vlm-tile.html +++ /dev/null @@ -1,22 +0,0 @@ -<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 deleted file mode 100644 index 1a3dc1d..0000000 --- a/components/tile/vsp-tile.html +++ /dev/null @@ -1,17 +0,0 @@ -<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 deleted file mode 100644 index 3f255ed..0000000 --- a/components/tooltip/_tooltip.scss +++ /dev/null @@ -1,124 +0,0 @@ -/* 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 deleted file mode 100644 index 771a242..0000000 --- a/components/validation/_validation.scss +++ /dev/null @@ -1,9 +0,0 @@ -.sdc-validation { - - font-size: $body-font-4; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: 10px; - -} |