From 1de28f670b484053612f7d15ee85fdde38b2bda2 Mon Sep 17 00:00:00 2001 From: Alexander Gudulin Date: Wed, 21 Oct 2015 21:27:53 +0300 Subject: [PATCH 1/2] Setup styles for dropdown (select) control --- .../preferences/stylesheets/preferences.less | 6 +++--- internal_packages/ui-dark/styles/ui-variables.less | 13 +++++++------ static/dropdowns.less | 8 ++++++++ static/index.less | 1 + static/variables/ui-variables.less | 6 ++++++ 5 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 static/dropdowns.less diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less index 0c8a612f9..a88a2eb75 100644 --- a/internal_packages/preferences/stylesheets/preferences.less +++ b/internal_packages/preferences/stylesheets/preferences.less @@ -152,9 +152,9 @@ body.platform-darwin { } .container-notifications { - width: 75%; - margin-left: 12.5%; - margin-right: 12.5%; + width: 80%; + margin-left: 10%; + margin-right: 10%; } .container-appearance { diff --git a/internal_packages/ui-dark/styles/ui-variables.less b/internal_packages/ui-dark/styles/ui-variables.less index 4ac3ea6e6..de239c8d1 100644 --- a/internal_packages/ui-dark/styles/ui-variables.less +++ b/internal_packages/ui-dark/styles/ui-variables.less @@ -10,11 +10,12 @@ @background-secondary: #2D2D2D; @background-tertiary: #6d7987; -@background-primary: #313131; -@background-color: darken(#313131, 15%); -@btn-default-bg-color: #404040; -@accent-primary: lighten(#5AA8FA, 20%); -@accent-primary-dark: lighten(#3087E1, 20%); +@background-primary: #313131; +@background-color: darken(#313131, 15%); +@btn-default-bg-color: #404040; +@dropdown-default-bg-color: #404040; +@accent-primary: lighten(#5AA8FA, 20%); +@accent-primary-dark: lighten(#3087E1, 20%); @text-color: #C2C2C2; @text-color-subtle: fadeout(@text-color, 20%); @@ -22,7 +23,7 @@ @text-color-inverse: white; @text-color-inverse-subtle: fadeout(@text-color-inverse, 20%); @text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%); -@text-color-heading: #FFF; +@text-color-heading: #FFF; @border-primary-bg: lighten(@background-primary, 10%); @border-secondary-bg: lighten(@background-secondary, 10%); diff --git a/static/dropdowns.less b/static/dropdowns.less new file mode 100644 index 000000000..10cc10fba --- /dev/null +++ b/static/dropdowns.less @@ -0,0 +1,8 @@ +@import "ui-variables"; + +select { + // Set `border` property to allow styling for `select` controls + border: 1px solid @dropdown-default-border-color; + color: @dropdown-default-text-color; + background: @dropdown-default-bg-color; +} diff --git a/static/index.less b/static/index.less index c4bb46bcb..48750e5e5 100644 --- a/static/index.less +++ b/static/index.less @@ -8,6 +8,7 @@ @import "type"; @import "inputs"; @import "buttons"; +@import "dropdowns"; @import "workspace"; @import "resizable"; @import "selection"; diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index 8bcf72cda..25b8e12b8 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -191,6 +191,12 @@ @btn-danger-bg-color: @danger-color; @btn-danger-text-color: @text-color-inverse; +//=============================== Dropdowns ============================// + +@dropdown-default-bg-color: @background-primary; +@dropdown-default-text-color: @text-color; +@dropdown-default-border-color: fadeout(@border-color, 10%); + //=============================== Inputs ===============================// //** `` background color From 0503be59a54c119a9eca64ec9225165ec0a4860f Mon Sep 17 00:00:00 2001 From: Alexander Gudulin Date: Wed, 21 Oct 2015 21:52:04 +0300 Subject: [PATCH 2/2] Revert back container width, fix controls align --- .../preferences/stylesheets/preferences.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less index a88a2eb75..2448d44da 100644 --- a/internal_packages/preferences/stylesheets/preferences.less +++ b/internal_packages/preferences/stylesheets/preferences.less @@ -47,7 +47,7 @@ body.platform-darwin { .preferences-wrap { input[type=checkbox] {margin: 0 7px 0 0; position: relative; top: -1px; } input[type=radio] {margin: 0 7px 0 0; position: relative; top: -1px; } - select { margin:10px; margin-top:4px; } + select { margin: 4px 0 0 8px; } padding-bottom:50px; @@ -152,9 +152,9 @@ body.platform-darwin { } .container-notifications { - width: 80%; - margin-left: 10%; - margin-right: 10%; + width: 75%; + margin-left: auto; + margin-right: auto; } .container-appearance {