aboutsummaryrefslogtreecommitdiffstats
path: root/components/search-bar
diff options
context:
space:
mode:
Diffstat (limited to 'components/search-bar')
-rw-r--r--components/search-bar/_search-bar.scss61
-rw-r--r--components/search-bar/search-bar-with-text.html17
-rw-r--r--components/search-bar/search-bar.html16
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>