From f68dc5ca23cbd4019a84295c64c55b46f80484e4 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 15 Aug 2017 09:48:31 +0200 Subject: [PATCH 1/3] Starting to play with new form styles --- .gitignore | 3 +++ public/sass/_variables.dark.scss | 2 +- public/sass/components/_gf-form.scss | 6 +++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 0e6affc6120..cfa3a68c057 100644 --- a/.gitignore +++ b/.gitignore @@ -41,3 +41,6 @@ profile.cov /examples/*/dist /packaging/**/*.rpm /packaging/**/*.deb + +# Ignore OSX indexing +.DS_Store diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8179d105690..9f9b508c141 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -166,7 +166,7 @@ $input-bg: $black; $input-bg-disabled: $dark-3; $input-color: $gray-4; -$input-border-color: $dark-4; +$input-border-color: $dark-3; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10); $input-border-focus: $input-border-color !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index c8d5f4d7315..bbf9d72084d 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -51,14 +51,13 @@ $gf-form-margin: 0.25rem; .gf-form-label { padding: $input-padding-y $input-padding-x; - margin-right: $gf-form-margin; flex-shrink: 0; font-weight: $font-weight-semi-bold; background-color: $input-label-bg; display: block; font-size: $font-size-sm; - margin-right: $gf-form-margin; + margin-right: 0; border: $input-btn-border-width solid transparent; @include border-radius($label-border-radius-sm); @@ -112,7 +111,8 @@ $gf-form-margin: 0.25rem; background-color: $input-bg; background-image: none; background-clip: padding-box; - border: $input-btn-border-width solid $input-border-color; + border: 1px solid $input-border-color; + border-bottom: 0px; @include border-radius($input-border-radius-sm); @include box-shadow($input-box-shadow); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; From 588f35ef4fcdfb97b548c968d613eb55de4cb117 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 15 Aug 2017 10:54:13 +0200 Subject: [PATCH 2/3] Reduced size of breadcrumbs, additional form styling. Colors still need to be adjusted --- public/sass/components/_dropdown.scss | 4 ++++ public/sass/components/_gf-form.scss | 9 +++++---- public/sass/layout/_page.scss | 21 ++++++++++++--------- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index c12a0ef4141..8dee2bcc2b9 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -120,6 +120,10 @@ } } } + &--navbar { + background: $black; + font-size: $font-size-sm; + } } .dropdown-item-text { diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index bbf9d72084d..b2b17899308 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,4 +1,4 @@ -$gf-form-margin: 0.25rem; +$gf-form-margin: 0.1rem; .gf-form { margin-bottom: $gf-form-margin; @@ -54,10 +54,10 @@ $gf-form-margin: 0.25rem; flex-shrink: 0; font-weight: $font-weight-semi-bold; - background-color: $input-label-bg; + background-color: #23252d; //$input-label-bg; display: block; font-size: $font-size-sm; - margin-right: 0; + margin-right: $gf-form-margin; border: $input-btn-border-width solid transparent; @include border-radius($label-border-radius-sm); @@ -112,7 +112,8 @@ $gf-form-margin: 0.25rem; background-image: none; background-clip: padding-box; border: 1px solid $input-border-color; - border-bottom: 0px; + border-bottom: none; + border-left: none; @include border-radius($input-border-radius-sm); @include box-shadow($input-box-shadow); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index d823a8e457f..90d29d55108 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -11,7 +11,7 @@ .main-view { position: relative; flex-grow: 1; - background: inear-gradient(180deg, #1b1d25 0, #210d0d); + background: linear-gradient(180deg, #251f1f 0, #17181b); } .page-container { @@ -107,13 +107,15 @@ $breadcrumb-hover-hl: #111; $page-nav-bg: black; -.page-nav { - background: $page-nav-bg; - } +$page-breadcrumb__angle-1: 39px; +$page-breadcrumb__angle-ul: 31px; +$page-breadcrumb__angle-a: 30px; + .page-breadcrumb { display: flex; padding: 0 $spacer; + line-height: 0.5; } .page-breadcrumb__item { @@ -121,6 +123,7 @@ $page-nav-bg: black; > a { color: $text-color-weak; + font-size: $font-size-sm; display: block; padding: 0.6rem 1rem 0.6rem 3rem;; position: relative; @@ -133,9 +136,9 @@ $page-nav-bg: black; content: ''; height: 0; width: 0; - border: 46px solid transparent; + border: $page-breadcrumb__angle-1 solid transparent; border-right-width: 0; - border-left-width: 41px; + border-left-width: $page-breadcrumb__angle-a; z-index: 2; border-left-color: $page-nav-bg; } @@ -155,9 +158,9 @@ $page-nav-bg: black; content: ''; height: 0; width: 0; - border: 46px solid transparent; + border: $page-breadcrumb__angle-1 solid transparent; border-right-width: 0; - border-left-width: 41px; + border-left-width: $page-breadcrumb__angle-ul; z-index: 1; transform: translateX(4px); border-left-color: #282020; @@ -189,7 +192,7 @@ $page-nav-bg: black; width: 16px; height: 16px; right: -9px; - top: 12px; + top: 5px; z-index: 3; } From b949f019cfcea603e8df6ec1a09c1802d57c5be5 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 15 Aug 2017 11:04:26 +0200 Subject: [PATCH 3/3] Added drop shadown for sticky scrolling, moved colors into dark and light variables --- public/sass/_variables.dark.scss | 5 +++++ public/sass/_variables.light.scss | 5 +++++ public/sass/layout/_page.scss | 3 ++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 9f9b508c141..97150d3c853 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -240,6 +240,11 @@ $menu-dropdown-hover-bg: $dark-2; $menu-dropdown-border-color: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; +// Breadcrumb +// ------------------------- +$page-nav-bg: $black; +$page-nav-shadow: 5px 5px 20px -5px $black; + // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 07d1c41f67b..c803639f8fc 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -192,6 +192,11 @@ $menu-dropdown-hover-bg: $gray-6; $menu-dropdown-border-color: $tight-form-border; $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4; +// Breadcrumb +// ------------------------- +$page-nav-bg: $white; +$page-nav-shadow: 5px 5px 20px -5px $gray-4; + // search $search-shadow: 0 5px 30px 0 $gray-4; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 90d29d55108..474cdd90174 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -105,7 +105,6 @@ } $breadcrumb-hover-hl: #111; -$page-nav-bg: black; $page-breadcrumb__angle-1: 39px; $page-breadcrumb__angle-ul: 31px; @@ -120,6 +119,8 @@ $page-breadcrumb__angle-a: 30px; .page-breadcrumb__item { background: $page-nav-bg; + box-shadow: $page-nav-shadow; + > a { color: $text-color-weak;