aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/style/_component-search.scss52
-rw-r--r--src/client/style/_page-index.scss20
-rw-r--r--src/client/style/index.scss81
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";