diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/style/_component-search.scss | 52 | ||||
| -rw-r--r-- | src/client/style/_page-index.scss | 20 | ||||
| -rw-r--r-- | src/client/style/index.scss | 81 |
3 files changed, 77 insertions, 76 deletions
diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss new file mode 100644 index 0000000..cac1ae3 --- /dev/null +++ b/src/client/style/_component-search.scss @@ -0,0 +1,52 @@ +.search { + border-radius: 2px; + background-color: white; + + &--has-focus { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + } + + &__results--has-results { + border-top: 1px #BDBDBD solid; + } + + &__icon-wrapper { + height: 54px; + padding: 15px; + svg { + height: 24px; + width: 24px; + } + } + + &__input-wrapper { + display: flex; + height: 54px; + + input { + border: 0; + background-color: transparent; + flex-grow: 1; + height: inherit; + padding: 16px; + padding-left: 0px; + font-size: 16px; + outline: none; + } + } + + &__result { + display: flex; + + &--selected { + background-color: lightgray; + } + + &__text { + padding: 15px; + padding-left: 0px; + font-size: 16px; + transform: translate(0, 3px); + } + } +} diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss new file mode 100644 index 0000000..410a542 --- /dev/null +++ b/src/client/style/_page-index.scss @@ -0,0 +1,20 @@ +.page-index { + background-color: #ececec; + padding-top: 24vh; + height: 100vh; + + .container { + max-width: 600px; + margin: 0 auto; + padding: 20px; + + img { + display: block; + margin: 0 auto; + } + + .search { + margin-top: 64px; + } + } +}
\ No newline at end of file diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 95a8d77..9521ab7 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -1,82 +1,11 @@ -body { - font-family: 'Roboto'; - margin: 0; -} - * { box-sizing: border-box; } -.page-index { - background-color: #ececec; - padding-top: 24vh; - height: 100vh; - - .container { - max-width: 600px; - margin: 0 auto; - padding: 20px; - - img { - display: block; - margin: 0 auto; - } - - .search { - margin-top: 64px; - } - } +body { + font-family: 'Roboto'; + margin: 0; } -.search { - border-radius: 2px; - background-color: white; - - &--has-focus { - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - } - - &__results--has-results { - border-top: 1px #BDBDBD solid; - } - - &__icon-wrapper { - height: 54px; - padding: 15px; - svg { - height: 24px; - width: 24px; - } - } - - &__input-wrapper { - display: flex; - height: 54px; - - input { - border: 0; - background-color: transparent; - flex-grow: 1; - height: inherit; - padding: 16px; - padding-left: 0px; - font-size: 16px; - outline: none; - } - } - - &__result { - display: flex; - - &--selected { - background-color: lightgray; - } - - &__text { - padding: 15px; - padding-left: 0px; - font-size: 16px; - transform: translate(0, 3px); - } - } -} +@import "page-index"; +@import "component-search"; |