From b52616c64df1e438a4febf1f55c1751ffc4c213f Mon Sep 17 00:00:00 2001 From: John Ciprian Date: Tue, 11 Dec 2018 15:07:07 -0500 Subject: [PATCH] Changing tabs from material design to traditional MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Adding support for “default” interface theme. - Adding support for “white” interface theme. - Adding support for “dark” interface theme. --- browser/components/SnippetTab.styl | 109 ++++++++++----------- browser/main/Detail/SnippetNoteDetail.styl | 32 +++++- browser/styles/index.styl | 2 - 3 files changed, 80 insertions(+), 63 deletions(-) diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl index a31b8594..9c785104 100644 --- a/browser/components/SnippetTab.styl +++ b/browser/components/SnippetTab.styl @@ -3,19 +3,30 @@ flex 1 min-width 70px overflow hidden + border-left 1px solid $ui-borderColor + border-top 1px solid $ui-borderColor &:hover + background-color alpha($ui-button--active-backgroundColor, 20%) .deleteButton - color $ui-inactive-text-color - &:hover - background-color darken($ui-backgroundColor, 15%) - &:active - color white - background-color $ui-active-color + color: $ui-text-color + visibility visible + transition 0.15s + .button + color: $ui-text-color + transition 0.15s .root--active @extend .root min-width 100px - border-bottom $ui-border + background-color alpha($ui-button--active-backgroundColor, 60%) + .deleteButton + visibility visible + color: $ui-text-color + transition 0.15s + .button + font-weight bold + color: $ui-text-color + transition 0.15s .button width 100% @@ -27,8 +38,7 @@ background-color transparent transition 0.15s border-left 4px solid transparent - &:hover - background-color $ui-button--hover-backgroundColor + color $ui-inactive-text-color .deleteButton position absolute @@ -42,6 +52,7 @@ color $ui-inactive-text-color background-color transparent border-radius 2px + visibility hidden .input height 29px @@ -50,73 +61,68 @@ width 100% outline none +body[data-theme="default"], body[data-theme="white"] + .root--active + &:hover + background-color alpha($ui-button--active-backgroundColor, 60%) + body[data-theme="dark"] .root - color $ui-dark-text-color - border-color $ui-dark-borderColor + border-left 1px solid $ui-dark-borderColor + border-top 1px solid $ui-dark-borderColor &:hover - background-color $ui-dark-button--hover-backgroundColor + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + transition 0.15s + .button + color $ui-dark-text-color + transition 0.15s .deleteButton - color $ui-dark-inactive-text-color - &:hover - background-color darken($ui-dark-button--hover-backgroundColor, 15%) - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color + transition 0.15s .root--active - color $ui-dark-text-color - border-color $ui-dark-borderColor - &:hover - background-color $ui-dark-button--hover-backgroundColor - .deleteButton - color $ui-dark-inactive-text-color - &:hover - background-color darken($ui-dark-button--hover-backgroundColor, 15%) - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + background-color $ui-dark-button--active-backgroundColor + border-left 1px solid $ui-dark-borderColor + border-top 1px solid $ui-dark-borderColor + .button + color $ui-dark-text-color + .deleteButton + color $ui-dark-text-color .button border none - color $ui-dark-text-color background-color transparent transition color background-color 0.15s border-left 4px solid transparent - &:hover - color $ui-dark-text-color - background-color $ui-dark-button--hover-backgroundColor .input - background-color $ui-dark-button--hover-backgroundColor + background-color $ui-dark-button--active-backgroundColor color $ui-dark-text-color - - .deleteButton - color alpha($ui-dark-text-color, 30%) + transition 0.15s body[data-theme="solarized-dark"] .root color $ui-solarized-dark-text-color - border-color $ui-dark-borderColor + border-left 1px solid $ui-solarized-dark-borderColor + border-top 1px solid $ui-solarized-dark-borderColor &:hover background-color $ui-solarized-dark-noteDetail-backgroundColor .deleteButton color $ui-solarized-dark-text-color - &:hover - background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%) &:active color $ui-solarized-dark-text-color background-color $ui-dark-button--active-backgroundColor .root--active color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 20%) + border-left 1px solid $ui-solarized-dark-borderColor + border-top 1px solid $ui-solarized-dark-borderColor &:hover - background-color $ui-solarized-dark-noteDetail-backgroundColor .deleteButton color $ui-solarized-dark-text-color &:hover - background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%) + // background-color darken($ui-dark-button--hover-backgroundColor, 15%) &:active color $ui-solarized-dark-text-color background-color $ui-dark-button--active-backgroundColor @@ -129,7 +135,6 @@ body[data-theme="solarized-dark"] border-left 4px solid transparent &:hover color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-noteDetail-backgroundColor .input background-color $ui-solarized-dark-noteDetail-backgroundColor @@ -146,21 +151,16 @@ body[data-theme="monokai"] background-color $ui-monokai-noteDetail-backgroundColor .deleteButton color $ui-monokai-text-color - &:hover - background-color darken($ui-monokai-noteDetail-backgroundColor, 15%) &:active color $ui-monokai-text-color background-color $ui-dark-button--active-backgroundColor .root--active color $ui-monokai-text-color - border-color $ui-monokai-borderColor + background-color darken($ui-monokai-noteDetail-backgroundColor, 15%) &:hover - background-color $ui-monokai-noteDetail-backgroundColor .deleteButton color $ui-monokai-text-color - &:hover - background-color darken($ui-monokai-noteDetail-backgroundColor, 15%) &:active color $ui-monokai-text-color background-color $ui-dark-button--active-backgroundColor @@ -173,7 +173,6 @@ body[data-theme="monokai"] border-left 4px solid transparent &:hover color $ui-monokai-text-color - background-color $ui-monokai-noteDetail-backgroundColor .input background-color $ui-monokai-noteDetail-backgroundColor @@ -190,21 +189,16 @@ body[data-theme="dracula"] background-color $ui-dracula-noteDetail-backgroundColor .deleteButton color $ui-dracula-text-color - &:hover - background-color darken($ui-dracula-noteDetail-backgroundColor, 15%) &:active color $ui-dracula-text-color background-color $ui-dark-button--active-backgroundColor .root--active color $ui-dracula-text-color - border-color $ui-dracula-borderColor + background-color darken($ui-dracula-noteDetail-backgroundColor, 15%) &:hover - background-color $ui-dracula-noteDetail-backgroundColor .deleteButton color $ui-dracula-text-color - &:hover - background-color darken($ui-dracula-noteDetail-backgroundColor, 15%) &:active color $ui-dracula-text-color background-color $ui-dark-button--active-backgroundColor @@ -217,7 +211,6 @@ body[data-theme="dracula"] border-left 4px solid transparent &:hover color $ui-dracula-text-color - background-color $ui-dracula-noteDetail-backgroundColor .input background-color $ui-dracula-noteDetail-backgroundColor diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index e3bb31c6..4757d414 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -31,7 +31,7 @@ .tabList absolute left right - top 55px + top 70px height 30px display flex background-color $ui-noteDetail-backgroundColor @@ -57,6 +57,9 @@ .tabList .tabButton navWhiteButtonColor() width 30px + border-left 1px solid $ui-borderColor + border-top 1px solid $ui-borderColor + border-right 1px solid $ui-borderColor .tabView absolute left right bottom @@ -98,17 +101,36 @@ opacity 0 transition 0.1s -body[data-theme="white"] +body[data-theme="white"], body[data-theme="default"] .root box-shadow $note-detail-box-shadow border none + .tabButton + &:hover + background-color alpha($ui-button--active-backgroundColor, 20%) + color $ui-text-color + transition 0.15s + body[data-theme="dark"] .root border-left 1px solid $ui-dark-borderColor background-color $ui-dark-noteDetail-backgroundColor box-shadow none + .tabList .tabButton + border-left 1px solid $ui-dark-borderColor + border-top 1px solid $ui-dark-borderColor + border-right 1px solid $ui-dark-borderColor + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + + .tabButton + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-dark-text-color + transition 0.15s + .body background-color $ui-dark-noteDetail-backgroundColor @@ -118,7 +140,6 @@ body[data-theme="dark"] border 1px solid $ui-dark-borderColor .tabList - background-color $ui-button--active-backgroundColor background-color $ui-dark-noteDetail-backgroundColor .tabList .list @@ -150,6 +171,11 @@ body[data-theme="solarized-dark"] color $ui-solarized-dark-text-color border 1px solid $ui-solarized-dark-borderColor + .tabList .tabButton + border-left 1px solid $ui-solarized-dark-borderColor + border-top 1px solid $ui-solarized-dark-borderColor + border-right 1px solid $ui-solarized-dark-borderColor + .tabList background-color $ui-solarized-dark-noteDetail-backgroundColor color $ui-solarized-dark-text-color diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 56cb0eab..b9f9c41e 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -240,10 +240,8 @@ navWhiteButtonColor() &:hover background-color alpha($ui-button--active-backgroundColor, 20%) transition 0.15s - color $ui-text-color &:active, &:active:hover background-color $ui-button--active-backgroundColor - color $ui-text-color transition 0.15s // UI Button