From 747e10bc9c0ed6f4ff9c98a45f8aad05f9cd02fb Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Thu, 22 Mar 2018 12:09:24 +0100 Subject: [PATCH 01/15] app/assets/less/variables.less: we should use the american spelling of "grey". --- app/assets/less/variables.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index e55c4bf..b795f2c 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -10,9 +10,9 @@ // ---------------------------------- @blue: #0000ff; @lightest-gray: #f9f9f9; -@light-grey: #dcdcdc; -@dark-grey: #444; -@darker-grey: #202020; +@light-gray: #dcdcdc; +@dark-gray: #444; +@darker-gray: #202020; @black: #000; @white: #fff; @@ -25,7 +25,7 @@ @foreground-color: white; //@body-bg: #f3f6fc; @body-bg: #f5f5f6; -@border-color: @light-grey; +@border-color: @light-gray; @text-color: #353535; @text-secondary-color: #757575; @@ -152,7 +152,7 @@ // ---------------------------------- @callback-list-border-size: 1px; -@callback-list-border-color: @light-grey; +@callback-list-border-color: @light-gray; @callback-list-border-radius: 3px; @callback-list-name-text-size: @font-size-h4; @callback-list-name-color: @text-color; @@ -163,11 +163,11 @@ // Request list // ---------------------------------- -@request-item-color: @dark-grey; +@request-item-color: @dark-gray; @request-item-light-color: #666; @request-item-background: transparent; -@request-item-border-color: @light-grey; -@request-item-active-color: @dark-grey; +@request-item-border-color: @light-gray; +@request-item-active-color: @dark-gray; @request-item-active-background: @lightest-gray; @request-item-active-border-color: darken(@request-item-active-background, 10%); @request-item-hover-background: @request-item-active-background; From 5e67f98dd788cd492d606fc45076a13697fa4a1e Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 10:38:36 +0100 Subject: [PATCH 02/15] app/assets/less/variables.less: cleanup color variables abit. --- app/assets/less/variables.less | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index b795f2c..7da2d22 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -6,9 +6,8 @@ @image-path: '@{base-path}/img'; // ---------------------------------- -// General colors. +// Colors // ---------------------------------- -@blue: #0000ff; @lightest-gray: #f9f9f9; @light-gray: #dcdcdc; @dark-gray: #444; @@ -16,22 +15,19 @@ @black: #000; @white: #fff; -// ---------------------------------- -// Global colors. -// ---------------------------------- - -@brand-color: #03a9f4; -@brand-info: hsl(210, 70%, 50%); -@foreground-color: white; -//@body-bg: #f3f6fc; -@body-bg: #f5f5f6; -@border-color: @light-gray; - +// Text @text-color: #353535; @text-secondary-color: #757575; @text-light-color: #f1f1f1; -// Branding colors +// Layout +@foreground-color: white; +@body-bg: #f5f5f6; +@border-color: @light-gray; + +// Brand +@brand-color: #03a9f4; +@brand-info: hsl(210, 70%, 50%); @google-color: #db4437; @github-color: #4183c4; From 927cb8ec4149a46d8518554b09d6967ebe734979 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 10:38:48 +0100 Subject: [PATCH 03/15] app/assets/less/base/typography.less: remove dead code. --- app/assets/less/base/typography.less | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/less/base/typography.less b/app/assets/less/base/typography.less index a1790c3..e5ea78a 100644 --- a/app/assets/less/base/typography.less +++ b/app/assets/less/base/typography.less @@ -2,7 +2,6 @@ // Section header (part of .section) .hdr-center { - //&:extend(.text-center); display: inline-block; padding: 20px 80px; margin: 30px auto; From d2e8e64600e7c19d9e61e4e551690e2221ce5772 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 10:48:46 +0100 Subject: [PATCH 04/15] app/assets/less/variables.less: fixing the names for gray colors (prefixed with "gray" instead) --- app/assets/less/components/callback-list.less | 2 +- app/assets/less/variables.less | 23 ++++++++++--------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/app/assets/less/components/callback-list.less b/app/assets/less/components/callback-list.less index 023c773..ee17060 100644 --- a/app/assets/less/components/callback-list.less +++ b/app/assets/less/components/callback-list.less @@ -7,7 +7,7 @@ padding: .6em 1em; &:hover { - background: @lightest-gray; + background: @gray-lightest; } // Borders. diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 7da2d22..0a44968 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -8,10 +8,10 @@ // ---------------------------------- // Colors // ---------------------------------- -@lightest-gray: #f9f9f9; -@light-gray: #dcdcdc; -@dark-gray: #444; -@darker-gray: #202020; +@gray-lightest: #f9f9f9; +@gray-light: #dcdcdc; +@gray-dark: #444; +@gray-darker: #202020; @black: #000; @white: #fff; @@ -21,9 +21,9 @@ @text-light-color: #f1f1f1; // Layout -@foreground-color: white; +@foreground-color: @white; @body-bg: #f5f5f6; -@border-color: @light-gray; +@border-color: @gray-light; // Brand @brand-color: #03a9f4; @@ -148,8 +148,9 @@ // ---------------------------------- @callback-list-border-size: 1px; -@callback-list-border-color: @light-gray; +@callback-list-border-color: @gray-light; @callback-list-border-radius: 3px; +@callback-list-hover-color: @gray-lightest; @callback-list-name-text-size: @font-size-h4; @callback-list-name-color: @text-color; @callback-list-name-hover-color: @link-color; @@ -159,12 +160,12 @@ // Request list // ---------------------------------- -@request-item-color: @dark-gray; +@request-item-color: @gray-dark; @request-item-light-color: #666; @request-item-background: transparent; -@request-item-border-color: @light-gray; -@request-item-active-color: @dark-gray; -@request-item-active-background: @lightest-gray; +@request-item-border-color: @gray-light; +@request-item-active-color: @gray-dark; +@request-item-active-background: @gray-lightest; @request-item-active-border-color: darken(@request-item-active-background, 10%); @request-item-hover-background: @request-item-active-background; @request-detail-background: lighten(@brand-color, 45%); From 1337d2b0c54951f36d71b199ce31a0d7b57116fa Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:14:11 +0100 Subject: [PATCH 05/15] app/assets/less/components/pagination.less: add @pagination-active-color variable --- app/assets/less/components/pagination.less | 1 + app/assets/less/variables.less | 1 + 2 files changed, 2 insertions(+) diff --git a/app/assets/less/components/pagination.less b/app/assets/less/components/pagination.less index 9e28227..b89f976 100644 --- a/app/assets/less/components/pagination.less +++ b/app/assets/less/components/pagination.less @@ -24,6 +24,7 @@ } &.active a { + color: @pagination-active-color; background: @pagination-active-bg; border-color: @pagination-active-border; } diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 0a44968..c5cfd8a 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -132,6 +132,7 @@ @pagination-color: @text-color; @pagination-border: @border-color; @pagination-hover-color: lighten(@text-color, 25%); +@pagination-active-color: @white; @pagination-active-bg: @brand-color; @pagination-active-border: darken(@brand-color, 5%); From 72089baeebc4895fe9e35281229be7920da55838 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:23:36 +0100 Subject: [PATCH 06/15] app/assets/less/variables.less: change @body-bg a little little bit :) --- app/assets/less/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index c5cfd8a..040ba64 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -22,7 +22,7 @@ // Layout @foreground-color: @white; -@body-bg: #f5f5f6; +@body-bg: #f5f5f8; @border-color: @gray-light; // Brand From 23d5d7e0cb0e340f8118c406d689874e9a707b44 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:24:00 +0100 Subject: [PATCH 07/15] app/assets/less/variables.less: adding @hover-color --- app/assets/less/variables.less | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 040ba64..c26b527 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -23,6 +23,7 @@ // Layout @foreground-color: @white; @body-bg: #f5f5f8; +@hover-color: @gray-lightest; @border-color: @gray-light; // Brand From d4a11a7ab30c96ae49645a97937549d8f7ead1ca Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:25:06 +0100 Subject: [PATCH 08/15] app/assets/less/components/pagination.less: fix pagination abit. remove unused variable and set a slight hover effect. --- app/assets/less/components/pagination.less | 1 + app/assets/less/variables.less | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/less/components/pagination.less b/app/assets/less/components/pagination.less index b89f976..97ed4a0 100644 --- a/app/assets/less/components/pagination.less +++ b/app/assets/less/components/pagination.less @@ -20,6 +20,7 @@ &:hover { color: @pagination-color; + background-color: @pagination-hover; } } diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index c26b527..5e143a1 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -132,7 +132,8 @@ @pagination-color: @text-color; @pagination-border: @border-color; -@pagination-hover-color: lighten(@text-color, 25%); +@pagination-hover: @hover-color; + @pagination-active-color: @white; @pagination-active-bg: @brand-color; @pagination-active-border: darken(@brand-color, 5%); From 030ebbe1049e1152f4cc7d00f7a29f867ec94884 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:29:54 +0100 Subject: [PATCH 09/15] app/assets/less/variables.less: major cleanup. * Remove "special" color values in favor for defined ones in variables. * Remove some ref to bootstrap variables. --- app/assets/less/variables.less | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 5e143a1..481ff31 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -120,9 +120,9 @@ // Blankslate // ---------------------------------- -@blankslate-bg: @well-bg; +@blankslate-bg: @gray-lightest; @blankslate-color: @text-secondary-color; -@blankslate-border: @well-border; +@blankslate-border: @border-color; @blankslate-spacing: 25px 10px; @blankslate-spacing-sm: 15px 5px; @@ -142,7 +142,7 @@ // Section // ---------------------------------- -@section-bg: white; +@section-bg: @foreground-color; @section-border: rgb(200, 200, 200); @section-padding: 20px; @@ -150,25 +150,29 @@ // Callback list // ---------------------------------- +@callback-list-hover-color: @gray-lightest; +@callback-list-info-color: @text-secondary-color; + @callback-list-border-size: 1px; @callback-list-border-color: @gray-light; @callback-list-border-radius: 3px; -@callback-list-hover-color: @gray-lightest; + @callback-list-name-text-size: @font-size-h4; @callback-list-name-color: @text-color; @callback-list-name-hover-color: @link-color; -@callback-list-info-color: @text-secondary-color; // ---------------------------------- // Request list // ---------------------------------- @request-item-color: @gray-dark; -@request-item-light-color: #666; +@request-item-light-color: @gray; @request-item-background: transparent; @request-item-border-color: @gray-light; -@request-item-active-color: @gray-dark; -@request-item-active-background: @gray-lightest; -@request-item-active-border-color: darken(@request-item-active-background, 10%); @request-item-hover-background: @request-item-active-background; + +@request-item-active-color: @request-item-color; +@request-item-active-background: @gray-lightest; +@request-item-active-border-color: @request-item-border-color; + @request-detail-background: lighten(@brand-color, 45%); From 3acf74816641a07a3fb5c19091e5ef10e419542b Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:43:29 +0100 Subject: [PATCH 10/15] app/assets/less/variables.less: footer link color should reference @footer-text-color. --- app/assets/less/variables.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 481ff31..a4cf538 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -78,8 +78,8 @@ @footer-height: 80px; @footer-border-color: @border-color; @footer-text-color: @text-secondary-color; -@footer-link-color: @text-secondary-color; -@footer-link-hover-color: darken(@text-secondary-color, 10%); +@footer-link-color: @footer-text-color; +@footer-link-hover-color: darken(@footer-link-color, 10%); // ---------------------------------- // Buttons From 4c2e2cdcb63046c6f8a977ce33af552112a1e2f9 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:44:23 +0100 Subject: [PATCH 11/15] app/assets/less/variables.less: request list should use @text-color and @text-secondary color to make things consistent with other components of the site. --- app/assets/less/components/request-item.less | 2 +- app/assets/less/variables.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/less/components/request-item.less b/app/assets/less/components/request-item.less index 2278374..cffff6d 100644 --- a/app/assets/less/components/request-item.less +++ b/app/assets/less/components/request-item.less @@ -58,7 +58,7 @@ &-timestamp, &-size, &-ip { - color: @request-item-light-color; + color: @request-item-secondary-color; font-size: @font-size-small; } diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index a4cf538..427697c 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -165,8 +165,8 @@ // Request list // ---------------------------------- -@request-item-color: @gray-dark; -@request-item-light-color: @gray; +@request-item-color: @text-color; +@request-item-secondary-color: @text-secondary-color; @request-item-background: transparent; @request-item-border-color: @gray-light; @request-item-hover-background: @request-item-active-background; From ea8e48a9502a7cfc7e378a0a806e3798ace4fbda Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:48:19 +0100 Subject: [PATCH 12/15] app/assets/less/variables.less: change text color abit. --- app/assets/less/variables.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 427697c..18b25b4 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -16,8 +16,8 @@ @white: #fff; // Text -@text-color: #353535; -@text-secondary-color: #757575; +@text-color: #333; +@text-secondary-color: #666; @text-light-color: #f1f1f1; // Layout From 2fa685fea56d8be7bd1340fdfa3356bd5fc5a7b4 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sat, 24 Mar 2018 11:53:04 +0100 Subject: [PATCH 13/15] app/assets/less/components/callback-list.less: change arrow color to be the same as border. --- app/assets/less/components/callback-list.less | 2 +- app/assets/less/variables.less | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/less/components/callback-list.less b/app/assets/less/components/callback-list.less index ee17060..2c9197e 100644 --- a/app/assets/less/components/callback-list.less +++ b/app/assets/less/components/callback-list.less @@ -67,7 +67,7 @@ } &-arrow { - color: #bcbcbc; + color: @callback-list-arrow-color; position: absolute; right: .8em; top: 50%; diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 18b25b4..20e9be5 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -161,6 +161,8 @@ @callback-list-name-color: @text-color; @callback-list-name-hover-color: @link-color; +@callback-list-arrow-color: @callback-list-border-color; + // ---------------------------------- // Request list // ---------------------------------- From 95e7b60a826683153a37eec4adaaefcbc7481d30 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Fri, 30 Mar 2018 13:30:32 +0200 Subject: [PATCH 14/15] app/assets/less/variables.less: rename shadow variables to "less" ugly names :) --- app/assets/less/components/section.less | 2 +- app/assets/less/variables.less | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/less/components/section.less b/app/assets/less/components/section.less index eaac662..5d89cf0 100644 --- a/app/assets/less/components/section.less +++ b/app/assets/less/components/section.less @@ -9,7 +9,7 @@ padding: @section-padding; margin-bottom: 60px; border-radius: 2px; - .box-shadow(@block-shadow-third); + .box-shadow(@block-shadow-3); &-header { text-align: center; diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index 20e9be5..eb58e5e 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -112,9 +112,9 @@ // Shadows // ---------------------------------- -@block-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -@block-shadow-raised: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12); -@block-shadow-third: 0 3px 3px 0 rgba(0, 0, 0, 0.16); +@block-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); +@block-shadow-2: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12); +@block-shadow-3: 0 3px 3px 0 rgba(0, 0, 0, 0.16); // ---------------------------------- // Blankslate From af8f7d8cd641fac1b66db34b299d1f275ceca643 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Fri, 30 Mar 2018 13:31:11 +0200 Subject: [PATCH 15/15] app/assets/less/components/badge.less: use nesting. --- app/assets/less/components/badge.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/less/components/badge.less b/app/assets/less/components/badge.less index 913fd0f..ddbf146 100644 --- a/app/assets/less/components/badge.less +++ b/app/assets/less/components/badge.less @@ -10,9 +10,9 @@ &:empty { display:none; } -} -.badge-primary { - color: white; - background-color: @brand-color; + &-primary { + color: white; + background-color: @brand-color; + } }