1
0
mirror of https://github.com/BoostIo/Boostnote synced 2026-02-07 13:01:40 +00:00

adding Nord theme and streamlining UI theming

This commit is contained in:
Baptiste Augrain
2019-02-08 00:50:47 +01:00
parent 8b8d915ab7
commit 1cdac943ba
45 changed files with 1192 additions and 2306 deletions

View File

@@ -132,55 +132,57 @@ body[data-theme="white"]
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color
body[data-theme="dark"]
.header--active
background-color $ui-dark-button--active-backgroundColor
transition color background-color 0.15s
apply-theme(theme)
body[data-theme={theme}]
.header--active
background-color get-theme-var(theme, 'button--active-backgroundColor')
transition color background-color 0.15s
.header--active
.header-toggleButton
color get-theme-var(theme, 'text-color')
.header--active
.header-info
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
&:active
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.header--active
.header-addFolderButton
color get-theme-var(theme, 'text-color')
.header--active
.header-toggleButton
color $ui-dark-text-color
&:hover
transition 0.2s
color get-theme-var(theme, 'text-color')
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
&:active, &:active:hover
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.header--active
.header-info
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:active
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
&:hover
transition 0.2s
color get-theme-var(theme, 'text-color')
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
&:active, &:active:hover
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.header--active
.header-addFolderButton
color $ui-dark-text-color
.header-toggleButton
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-info
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-addFolderButton
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:hover
transition 0.2s
color get-theme-var(theme, 'text-color')
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
&:active, &:active:hover
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
apply-theme('dark')
for theme in $themes
apply-theme(theme)