diff options
Diffstat (limited to 'components/search-bar')
-rw-r--r-- | components/search-bar/_search-bar.scss | 61 | ||||
-rw-r--r-- | components/search-bar/search-bar-with-text.html | 17 | ||||
-rw-r--r-- | components/search-bar/search-bar.html | 16 |
3 files changed, 0 insertions, 94 deletions
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> |