From edaa91d05e753e3609c00068f565b88c4ef77e62 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Sun, 10 Dec 2017 11:37:32 +0100 Subject: Compile scss to css --- src/client/style/index.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/client/style/index.scss (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss new file mode 100644 index 0000000..c4d554e --- /dev/null +++ b/src/client/style/index.scss @@ -0,0 +1,3 @@ +body { + background-color: black; +} -- cgit v1.1 From 9f6a36d1f1a16c1a777a23fcc8c986c45ee0a116 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Sun, 10 Dec 2017 13:25:46 +0100 Subject: Add some basic styling --- src/client/style/index.scss | 41 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index c4d554e..6f1592c 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -1,3 +1,42 @@ body { - background-color: black; + background-color: #ececec; +} + +* { + box-sizing: border-box; +} + +.search { + width: 580px; + height: 54px; + background-color: white; + + &.focus { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + } + + &__icon-wrapper { + height: 54px; + padding: 15px; + svg { + height: 24px; + width: 24px; + } + } + + &__input-wrapper { + display: flex; + widows: inherit; + height: 54px; + + input { + border: 0; + background-color: transparent; + flex-grow: 1; + height: inherit; + padding: 16px; + padding-left: 0px; + font-size: 16px; + } + } } -- cgit v1.1 From 7e63aa14ea4298a1511f75e875ca001d2bd61ee8 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Sun, 10 Dec 2017 13:53:07 +0100 Subject: Add results --- src/client/style/index.scss | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 6f1592c..d7d8b01 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -1,5 +1,6 @@ body { background-color: #ececec; + font-family: 'Roboto'; } * { @@ -8,13 +9,19 @@ body { .search { width: 580px; - height: 54px; + border-radius: 2px; background-color: white; - &.focus { + &--has-focus { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } + &--has-results { + .search__input-wrapper { + border-bottom: 1px #BDBDBD solid; + } + } + &__icon-wrapper { height: 54px; padding: 15px; @@ -26,7 +33,6 @@ body { &__input-wrapper { display: flex; - widows: inherit; height: 54px; input { @@ -39,4 +45,15 @@ body { font-size: 16px; } } + + &__result { + display: flex; + + &__text { + padding: 15px; + padding-left: 0px; + font-size: 16px; + transform: translate(0, 3px); + } + } } -- cgit v1.1 From 65d25ee00ebed51ea87cdc419591481d1814d92c Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Sun, 10 Dec 2017 19:12:08 +0100 Subject: Hide outline --- src/client/style/index.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index d7d8b01..19ef748 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -43,6 +43,7 @@ body { padding: 16px; padding-left: 0px; font-size: 16px; + outline: none; } } -- cgit v1.1 From 2216d1ceed02e54620f16fb826e5947b6c2cb9bf Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Mon, 11 Dec 2017 20:43:07 +0100 Subject: Add line between results and search --- src/client/style/index.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 19ef748..8e1b4d0 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -16,10 +16,8 @@ body { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } - &--has-results { - .search__input-wrapper { - border-bottom: 1px #BDBDBD solid; - } + &__results--has-results { + border-top: 1px #BDBDBD solid; } &__icon-wrapper { -- cgit v1.1 From 503ab5c66ab524dfe36aed84a01899cd07ed2bc5 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 13 Dec 2017 15:53:19 +0100 Subject: Allow selection of result using keyboard --- src/client/style/index.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 8e1b4d0..7c83c77 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -48,6 +48,10 @@ body { &__result { display: flex; + &--selected { + background-color: lightgray; + } + &__text { padding: 15px; padding-left: 0px; -- cgit v1.1 From 2232877ed5b3c0b60789940d2a367726ee8919c5 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 17 Jan 2018 16:45:17 +0100 Subject: Add some basic styling --- src/client/style/index.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 7c83c77..9fa267c 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -1,12 +1,28 @@ body { - background-color: #ececec; font-family: 'Roboto'; + margin: 0; } * { box-sizing: border-box; } +.page-index { + background-color: #ececec; + padding-top: 24vh; + height: 100vh; + + img { + display: block; + margin: 0 auto; + } + + .search { + margin: 0 auto; + margin-top: 64px; + } +} + .search { width: 580px; border-radius: 2px; -- cgit v1.1 From c080bc41019d42f1260fdaa739816af31a8d2b40 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 19 Jan 2018 14:51:16 +0100 Subject: Improve responsiveness --- src/client/style/index.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) (limited to 'src/client/style') diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 9fa267c..95a8d77 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -12,19 +12,23 @@ body { padding-top: 24vh; height: 100vh; - img { - display: block; + .container { + max-width: 600px; margin: 0 auto; - } + padding: 20px; - .search { - margin: 0 auto; - margin-top: 64px; + img { + display: block; + margin: 0 auto; + } + + .search { + margin-top: 64px; + } } } .search { - width: 580px; border-radius: 2px; background-color: white; -- cgit v1.1 From 0bea1f5a594b8adfccb59783b0ec10b33443d2b3 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 19 Jan 2018 14:58:31 +0100 Subject: Split style into files --- src/client/style/_component-search.scss | 52 +++++++++++++++++++++ src/client/style/_page-index.scss | 20 ++++++++ src/client/style/index.scss | 81 ++------------------------------- 3 files changed, 77 insertions(+), 76 deletions(-) create mode 100644 src/client/style/_component-search.scss create mode 100644 src/client/style/_page-index.scss (limited to 'src/client/style') 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"; -- cgit v1.1 From 0bddf7661d7ece709a18f2d167b928749638f318 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 24 Jan 2018 15:44:31 +0100 Subject: Add animation to results --- src/client/style/_component-help-box.scss | 23 +++++++++++++++++++++++ src/client/style/_component-search.scss | 5 +++++ src/client/style/_page-index.scss | 2 +- src/client/style/index.scss | 2 ++ 4 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 src/client/style/_component-help-box.scss (limited to 'src/client/style') diff --git a/src/client/style/_component-help-box.scss b/src/client/style/_component-help-box.scss new file mode 100644 index 0000000..e7457c2 --- /dev/null +++ b/src/client/style/_component-help-box.scss @@ -0,0 +1,23 @@ +.help-box { + position: relative; + margin-top: 32px; + + .arrow { + position: absolute; + background-color: white; + width: 32px; + height: 32px; + top: -16px; + left: 48px; + transform: rotate(45deg); + } + + .bubble { + position: relative; + background-color: white; + font-weight: bold; + margin: 16px; + padding: 16px; + border-radius: 4px; + } +} diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss index cac1ae3..d819e6f 100644 --- a/src/client/style/_component-search.scss +++ b/src/client/style/_component-search.scss @@ -35,6 +35,11 @@ } } + &__results { + transition: 0.1s ease-in-out min-height; + overflow: hidden; + } + &__result { display: flex; diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss index 410a542..6fe7739 100644 --- a/src/client/style/_page-index.scss +++ b/src/client/style/_page-index.scss @@ -17,4 +17,4 @@ margin-top: 64px; } } -} \ No newline at end of file +} diff --git a/src/client/style/index.scss b/src/client/style/index.scss index 9521ab7..d2ad825 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -8,4 +8,6 @@ body { } @import "page-index"; + @import "component-search"; +@import "component-help-box"; -- cgit v1.1 From 16723546de81e29fa8a31acc4070df5acb182b24 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 24 Jan 2018 16:08:49 +0100 Subject: Add basic styling to user page --- src/client/style/_component-search.scss | 11 +++++++++-- src/client/style/_page-index.scss | 3 ++- src/client/style/_page-user.scss | 11 +++++++++++ src/client/style/index.scss | 1 + 4 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 src/client/style/_page-user.scss (limited to 'src/client/style') diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss index d819e6f..51d6b4a 100644 --- a/src/client/style/_component-search.scss +++ b/src/client/style/_component-search.scss @@ -1,6 +1,13 @@ .search { - border-radius: 2px; - background-color: white; + height: 54px; + position: relative; + + &-overflow { + border-radius: 2px; + background-color: white; + position: absolute; + width: 100%; + } &--has-focus { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss index 6fe7739..c09f996 100644 --- a/src/client/style/_page-index.scss +++ b/src/client/style/_page-index.scss @@ -6,7 +6,7 @@ .container { max-width: 600px; margin: 0 auto; - padding: 20px; + padding: 8px; img { display: block; @@ -14,6 +14,7 @@ } .search { + z-index: 1; // Position search above help-box margin-top: 64px; } } diff --git a/src/client/style/_page-user.scss b/src/client/style/_page-user.scss new file mode 100644 index 0000000..395e492 --- /dev/null +++ b/src/client/style/_page-user.scss @@ -0,0 +1,11 @@ +.page-user { + .menu { + background-color: #F44336; + + &-container { + max-width: 600px; + margin: 0 auto; + padding: 8px; + } + } +} diff --git a/src/client/style/index.scss b/src/client/style/index.scss index d2ad825..763a329 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -8,6 +8,7 @@ body { } @import "page-index"; +@import "page-user"; @import "component-search"; @import "component-help-box"; -- cgit v1.1