From cd696f91d5a282353979265d1e6f7c3a1527ab4e Mon Sep 17 00:00:00 2001 From: Paul Bouchon Date: Sat, 15 Jul 2017 18:59:15 -0400 Subject: [PATCH 1/4] Initial theme --- src/themes/dojo/tabPane.m.css | 114 +++++++++++++++------------------- src/themes/dojo/variables.css | 53 ++++++++++++++++ 2 files changed, 102 insertions(+), 65 deletions(-) diff --git a/src/themes/dojo/tabPane.m.css b/src/themes/dojo/tabPane.m.css index e89eff46cf..8ce8026240 100644 --- a/src/themes/dojo/tabPane.m.css +++ b/src/themes/dojo/tabPane.m.css @@ -1,8 +1,13 @@ @import './variables.css'; +:root { + --tab-width: calc(var(--grid-base) * 16); +} + .root { - font: var(--base-font); box-sizing: border-box; + font-size: var(--font-size-base); + line-height: var(--line-height-base); } .root * { @@ -10,72 +15,62 @@ } .tabButton { - border-top: var(--border-thick) solid transparent; - border-left: var(--border-thin) solid transparent; - border-right: var(--border-thin) solid transparent; - text-align: center; - padding: 14px 28px 14px 28px; + border-bottom: var(--border-width) solid var(--color-border); + border-left: var(--border-width) solid transparent; + border-right: var(--border-width) solid transparent; + border-top: var(--border-width) solid transparent; + color: var(--dojo-dark-grey); + cursor: pointer; display: inline-block; - vertical-align: top; - width: var(--tab-width); - white-space: nowrap; + outline: none; overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; + padding: 15px 0; position: relative; - top: 1px; - z-index: 1; - background: var(--dojo-white); - outline: none; + text-align: center; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + width: var(--tab-width); } -.tabButton:focus:not(.disabledTabButton) { - font-weight: bold; +.tabButton:hover:not(.disabledTabButton):not(.activeTabButton) { + background-color: var(--dojo-light-grey); + border-color: var(--dojo-light-grey); + color: var(--color-text-primary); } .activeTabButton { - border-top-color: var(--dojo-blue); - border-left-color: var(--dojo-shade-gray); - border-right-color: var(--dojo-shade-gray); - z-index: 2; + border-bottom-color: var(--dojo-blue); + color: var(--dojo-blue); } .disabledTabButton { - font-style: italic; - cursor: default; color: var(--dojo-gray); + cursor: default; } .close { - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 5px; + background: none; + border: none; cursor: pointer; font-size: 0; - border: none; - background: none; outline: none; padding: 1px 3px; + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); } .close:after { content: '✕'; display: block; - font-size: 14px; -} - -.close:focus { - box-shadow: var(--input-focus-shadow); + font-size: var(--font-size-small); } .tab { position: relative; padding: var(--container-padding); - border: var(--border-thin) solid var(--dojo-shade-gray); - z-index: 1; - background: var(--dojo-white); - min-height: var(--min-container-height); } .alignLeft .tabs { @@ -93,29 +88,13 @@ border-top: var(--border-thin) solid transparent; border-left: var(--border-thick) solid transparent; border-bottom: var(--border-thin) solid transparent; - border-right: none; + border-right: var(--border-width) solid var(--color-border); display: block; - top: 0; - left: 1px; } .alignLeft .activeTabButton { - border-top-color: var(--dojo-shade-gray); - border-left-color: var(--dojo-blue); - border-bottom-color: var(--dojo-shade-gray); -} - -.alignBottom .tabButton { - border-top: none; - border-bottom: var(--border-thick) solid transparent; - top: -1px; - z-index: 0; -} - -.alignBottom .activeTabButton { - border-top-color: var(--dojo-shade-gray); - border-bottom-color: var(--dojo-blue); - z-index: 1; + border-right-color: var(--dojo-blue); + color: var(--dojo-blue); } .alignRight .tabs { @@ -133,16 +112,21 @@ border-top: var(--border-thin) solid transparent; border-right: var(--border-thick) solid transparent; border-bottom: var(--border-thin) solid transparent; - border-left: none; + border-left: var(--border-width) solid var(--color-border); display: block; - top: 0; - left: -1px; - z-index: 0; } .alignRight .activeTabButton { - border-top-color: var(--dojo-shade-gray); - border-right-color: var(--dojo-blue); - border-bottom-color: var(--dojo-shade-gray); - z-index: 1; + border-left-color: var(--dojo-blue); + color: var(--dojo-blue); +} + +.alignBottom .tabButton { + border-top-color: var(--color-border); + border-bottom-color: transparent; +} + +.alignBottom .activeTabButton { + border-top-color: var(--dojo-blue); + border-bottom-color: transparent; } diff --git a/src/themes/dojo/variables.css b/src/themes/dojo/variables.css index 5e927fc56c..be6bed8498 100644 --- a/src/themes/dojo/variables.css +++ b/src/themes/dojo/variables.css @@ -1,4 +1,8 @@ :root { + /******************************* + ******** Old variables ********* + *******************************/ + /* Colors */ --dojo-blue: #34495e; --dojo-light-blue: #86BBD8; @@ -55,4 +59,53 @@ --calendar-disabled-bg: var(--dojo-light-gray); --calendar-hover-bg: var(--dojo-light-blue); --calendar-selected: var(--dojo-blue); + + /******************************* + ******** New variables ********* + *******************************/ + + /* Spacing */ + --grid-base: 8px; + --spacing-regular: var(--grid-base); + --spacing-large: calc(var(--grid-base) * 2); + + /* Fonts */ + --font-size-base: 16px; + --font-size-small: 14px; + --font-size-title: 20px; + --font-size-icon: 24px; + --line-height-base: 24px; + + /* Color hex values */ + --dojo-white: #ffffff; + --dojo-light-grey: #f4f6f7; + --dojo-grey: #d6dde2; + --dojo-dark-grey: #5c6c7c; + --dojo-black: #000000; + --dojo-blue: #006be6; + --dojo-red: #eb1313; + --dojo-green: #188701; + + /* Color usage names */ + --color-text-primary: var(--dojo-black); + --color-text-faded: var(--dojo-dark-grey); + --color-text-inverted: var(--dojo-white); + --color-highlight: var(--dojo-blue); + --color-success: var(--dojo-green); + --color-error: var(--dojo-red); + --color-background: var(--dojo-white); + --color-background-inverted: var(--dojo-dark-grey); + --color-background-faded: var(--dojo-light-grey); + --color-border: var(--dojo-grey); + --color-border-strong: var(--dojo-dark-grey); + --color-box-shadow: color(var(--dojo-black) alpha(20%)); + --color-box-shadow-strong: color(var(--dojo-black) alpha(50%)); + + /* Misc, for now */ + --box-shadow-dimensions-small: 0 2px 2px 0; + --box-shadow-dimensions-large: 0 9px 16px 0; + --border-width: 1px; + --border-width-emphasized: 2px; + --transition-duration: 0.25s; + --transition-easing: ease; } From 77cf03ea9290c9a255e8b9ca9d452dd60c458756 Mon Sep 17 00:00:00 2001 From: Paul Bouchon Date: Sat, 15 Jul 2017 19:07:33 -0400 Subject: [PATCH 2/4] Fix variables --- src/themes/dojo/tabPane.m.css | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/themes/dojo/tabPane.m.css b/src/themes/dojo/tabPane.m.css index 8ce8026240..0ed749967a 100644 --- a/src/themes/dojo/tabPane.m.css +++ b/src/themes/dojo/tabPane.m.css @@ -19,7 +19,7 @@ border-left: var(--border-width) solid transparent; border-right: var(--border-width) solid transparent; border-top: var(--border-width) solid transparent; - color: var(--dojo-dark-grey); + color: var(--color-text-faded); cursor: pointer; display: inline-block; outline: none; @@ -34,18 +34,18 @@ } .tabButton:hover:not(.disabledTabButton):not(.activeTabButton) { - background-color: var(--dojo-light-grey); - border-color: var(--dojo-light-grey); + background-color: var(--color-background-faded); + border-color: var(--color-background-faded); color: var(--color-text-primary); } .activeTabButton { - border-bottom-color: var(--dojo-blue); - color: var(--dojo-blue); + border-bottom-color: var(--color-highlight); + color: var(--color-highlight); } .disabledTabButton { - color: var(--dojo-gray); + color: var(--color-border); cursor: default; } @@ -70,7 +70,6 @@ .tab { position: relative; - padding: var(--container-padding); } .alignLeft .tabs { @@ -85,16 +84,16 @@ } .alignLeft .tabButton { - border-top: var(--border-thin) solid transparent; - border-left: var(--border-thick) solid transparent; - border-bottom: var(--border-thin) solid transparent; + border-top: var(--border-width) solid transparent; + border-left: var(--border-width) solid transparent; + border-bottom: var(--border-width) solid transparent; border-right: var(--border-width) solid var(--color-border); display: block; } .alignLeft .activeTabButton { - border-right-color: var(--dojo-blue); - color: var(--dojo-blue); + border-right-color: var(--color-highlight); + color: var(--color-highlight); } .alignRight .tabs { @@ -109,16 +108,16 @@ } .alignRight .tabButton { - border-top: var(--border-thin) solid transparent; - border-right: var(--border-thick) solid transparent; - border-bottom: var(--border-thin) solid transparent; + border-top: var(--border-width) solid transparent; + border-right: var(--border-width) solid transparent; + border-bottom: var(--border-width) solid transparent; border-left: var(--border-width) solid var(--color-border); display: block; } .alignRight .activeTabButton { - border-left-color: var(--dojo-blue); - color: var(--dojo-blue); + border-left-color: var(--color-highlight); + color: var(--color-highlight); } .alignBottom .tabButton { @@ -127,6 +126,6 @@ } .alignBottom .activeTabButton { - border-top-color: var(--dojo-blue); + border-top-color: var(--color-highlight); border-bottom-color: transparent; } From 872c09971fc879a5c85bbb695648c2c51ae39c88 Mon Sep 17 00:00:00 2001 From: Paul Bouchon Date: Sat, 15 Jul 2017 19:26:20 -0400 Subject: [PATCH 3/4] Use base typography styles on root node --- src/themes/dojo/tabPane.m.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/themes/dojo/tabPane.m.css b/src/themes/dojo/tabPane.m.css index 0ed749967a..a557a0f154 100644 --- a/src/themes/dojo/tabPane.m.css +++ b/src/themes/dojo/tabPane.m.css @@ -6,6 +6,7 @@ .root { box-sizing: border-box; + color: var(--color-text-primary); font-size: var(--font-size-base); line-height: var(--line-height-base); } @@ -84,10 +85,10 @@ } .alignLeft .tabButton { - border-top: var(--border-width) solid transparent; - border-left: var(--border-width) solid transparent; border-bottom: var(--border-width) solid transparent; + border-left: var(--border-width) solid transparent; border-right: var(--border-width) solid var(--color-border); + border-top: var(--border-width) solid transparent; display: block; } @@ -108,10 +109,10 @@ } .alignRight .tabButton { - border-top: var(--border-width) solid transparent; - border-right: var(--border-width) solid transparent; border-bottom: var(--border-width) solid transparent; border-left: var(--border-width) solid var(--color-border); + border-right: var(--border-width) solid transparent; + border-top: var(--border-width) solid transparent; display: block; } @@ -121,11 +122,11 @@ } .alignBottom .tabButton { - border-top-color: var(--color-border); border-bottom-color: transparent; + border-top-color: var(--color-border); } .alignBottom .activeTabButton { - border-top-color: var(--color-highlight); border-bottom-color: transparent; + border-top-color: var(--color-highlight); } From 1752f683b39b226ad928bac5a5f820e58cb31f78 Mon Sep 17 00:00:00 2001 From: Paul Bouchon Date: Sat, 15 Jul 2017 19:31:32 -0400 Subject: [PATCH 4/4] Add focus styles --- src/themes/dojo/tabPane.m.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/themes/dojo/tabPane.m.css b/src/themes/dojo/tabPane.m.css index a557a0f154..2c1c22d39c 100644 --- a/src/themes/dojo/tabPane.m.css +++ b/src/themes/dojo/tabPane.m.css @@ -40,6 +40,11 @@ color: var(--color-text-primary); } +.tabButton:focus:not(.disabledTabButton) { + border-color: var(--color-highlight); + box-shadow: var(--box-shadow-dimensions-small) color(var(--color-highlight) alpha(20%)); +} + .activeTabButton { border-bottom-color: var(--color-highlight); color: var(--color-highlight);