public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Code Issues Releases Wiki Activity

extract stylus vars of nav

Browse Source
This commit is contained in:
Rokt33r
2016-05-14 13:50:23 +09:00
parent c3e62f58ab
commit 443b529667
5 changed files with 79 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
browser/main/SideNav/FolderItem.styl
View File

@@ -3,23 +3,15 @@
width 100% width 100%
position relative position relative
cursor pointer cursor pointer
transition 0.15s navButtonColor()
color $nav-inactive-text-color
&:hover
background-color $nav-hover-background
.control
opacity 1
&:active, &:hover:active
background-color $nav-active-background
color $nav-text-color
.root--active .root--active
@extend .root @extend .root
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
&:hover &:hover
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
.control .control
opacity 1 opacity 1
@@ -46,19 +38,11 @@
transition opacity 0.15s transition opacity 0.15s
.control-button .control-button
navButtonColor()
width 24px width 24px
height 24px height 24px
margin-top 4.5px margin-top 4.5px
border none
border-radius 5px border-radius 5px
background-color transparent
color $nav-inactive-text-color
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
&:active
background-color $nav-active-background
color $nav-text-color
.root--edit .root--edit
@extend .root @extend .root
@@ -69,12 +53,12 @@
height 33px height 33px
padding 0 10px padding 0 10px
border-radius 5px border-radius 5px
border solid 1px $nav-border-color border $ui-border
outline none outline none
&:focus &:focus
border-color $focus-border-color border-color $ui-input--focus-borderColor
&:disabled &:disabled
background-color $disabled-input-background background-color $ui-input--disabled-backgroundColor
.root--folded .root--folded
@extend .root @extend .root
@@ -95,7 +79,7 @@
box-sizing border-box box-sizing border-box
margin-left 0 margin-left 0
overflow ellipsis overflow ellipsis
background-color $nav-tooltip-background-color background-color $ui-tooltip-backgroundColor
color white color white
line-height 34px line-height 34px
border-top-right-radius 5px border-top-right-radius 5px
@@ -107,11 +91,11 @@
.root--folded--active .root--folded--active
@extend .root--folded @extend .root--folded
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
&:hover &:hover
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
.root--edit--folded .root--edit--folded
@extend .root--edit @extend .root--edit

65
browser/main/SideNav/RepositorySection.styl
View File

@@ -3,33 +3,25 @@
color $nav-text-color color $nav-text-color
.header .header
navButtonColor()
position relative position relative
width 100%
height 33px height 33px
cursor pointer cursor pointer
color $nav-inactive-text-color
transition 0.15s
border none
width 100%
text-align left text-align left
background-color transparent
font-size 14px font-size 14px
&:hover &:hover .header-control-button
background-color $nav-hover-background opacity 1
.header-control-button
opacity 1
&:active, &:active:hover
background-color $nav-active-background
color $nav-text-color
.header--active .header--active
@extend .header @extend .header
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
.header-control-button .header-control-button
opacity 1 opacity 1
&:hover &:hover
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
.header-name .header-name
position absolute position absolute
@@ -51,21 +43,13 @@
width 48px width 48px
.header-control-button .header-control-button
navButtonColor()
width 24px width 24px
height 24px
padding 0 padding 0
margin-top 4.5px margin-top 4.5px
height 24px
border none
border-radius 5px border-radius 5px
background-color transparent
color $nav-inactive-text-color
opacity 0 opacity 0
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
&:active
background-color $nav-active-background
color $nav-text-color
.header-control-button--show .header-control-button--show
@extend .header-control-button @extend .header-control-button
@@ -81,31 +65,22 @@
height 33px height 33px
padding 0 10px padding 0 10px
border-radius 5px border-radius 5px
border solid 1px $nav-border-color border $ui-border
outline none outline none
&:focus &:focus
border-color $focus-border-color border-color $ui-input--focus-borderColor
&:disabled &:disabled
background-color $disabled-input-background background-color $ui-input--disabled-backgroundColor
.newFolderButton .newFolderButton
height 33px navButtonColor()
height 34px
width 100% width 100%
border none border none
padding-left 20px padding-left 20px
text-align left text-align left
color $nav-inactive-text-color
background-color transparent
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
&:active
background-color $nav-active-background
color $nav-text-color
.newFolderButton
height 34px
line-height 34px line-height 34px
.newFolderButton-label .newFolderButton-label
margin-left 0 margin-left 0
@@ -135,7 +110,7 @@
box-sizing border-box box-sizing border-box
margin-left 0 margin-left 0
overflow ellipsis overflow ellipsis
background-color $nav-tooltip-background-color background-color $ui-tooltip-backgroundColor
color white color white
line-height 34px line-height 34px
border-top-right-radius 5px border-top-right-radius 5px
@@ -155,9 +130,9 @@
display none display none
.header-control-button--show .header-control-button--show
float right float right
background-color $nav-tooltip-button-background background-color $ui-tooltip-button-backgroundColor
&:hover &:hover
background-color $nav-tooltip-button-background--hover background-color $ui-tooltip-button--hover-backgroundColor
.newFolderButton .newFolderButton
width 44px width 44px
padding 0 padding 0
@@ -175,7 +150,7 @@
box-sizing border-box box-sizing border-box
margin-left 0 margin-left 0
overflow ellipsis overflow ellipsis
background-color $nav-tooltip-background-color background-color $ui-tooltip-backgroundColor
color white color white
line-height 34px line-height 34px
border-top-right-radius 5px border-top-right-radius 5px

31
browser/main/SideNav/SideNav.styl
View File

@@ -2,14 +2,14 @@
absolute top left absolute top left
bottom 24px bottom 24px
width 200px width 200px
border-right solid 1px $nav-border-color border-right $ui-border
background-color $nav-background-color background-color $ui-backgroundColor
user-select none user-select none
color $nav-text-color color $ui-text-color
.top .top
height 60px height 60px
border-bottom solid 1px $nav-border-color border-bottom $ui-border
.top-menu .top-menu
navButtonColor() navButtonColor()
@@ -35,10 +35,10 @@
.menu-button--active .menu-button--active
@extend .menu-button @extend .menu-button
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
&:hover &:hover
background-color $nav-active-background background-color $ui-button--active-backgroundColor
.menu-button-label .menu-button-label
margin-left 5px margin-left 5px
@@ -52,9 +52,10 @@
padding 0 10px padding 0 10px
margin-top 15px margin-top 15px
line-height 24px line-height 24px
color $nav-inactive-color color $ui-inactive-text-color
.navToggle .navToggle
navButtonColor()
display block display block
position absolute position absolute
right 5px right 5px
@@ -62,16 +63,6 @@
border-radius 16.5px border-radius 16.5px
height 33px height 33px
width 33px width 33px
color $nav-inactive-text-color
border none
background-color transparent
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
color $nav-inactive-text-color
&:active
background-color $nav-active-background
color $nav-text-color
.root-folded .root-folded
@extend .root @extend .root
@@ -93,7 +84,7 @@
margin-top -5px margin-top -5px
margin-left 0 margin-left 0
overflow hidden overflow hidden
background-color $nav-tooltip-background-color background-color $ui-tooltip-backgroundColor
color white color white
line-height 34px line-height 34px
border-top-right-radius 5px border-top-right-radius 5px
@@ -115,7 +106,7 @@
margin-top -9px margin-top -9px
margin-left 0 margin-left 0
overflow ellipsis overflow ellipsis
background-color $nav-tooltip-background-color background-color $ui-tooltip-backgroundColor
color white color white
line-height 34px line-height 34px
border-top-right-radius 5px border-top-right-radius 5px

29
browser/main/StatusBar/StatusBar.styl
View File

@@ -1,40 +1,23 @@
.root .root
absolute bottom left right absolute bottom left right
height 24px height 24px
border-top solid 1px $nav-border-color border-top $ui-border
background-color $nav-background-color background-color $ui-backgroundColor
.zoom .zoom
navButtonColor()
absolute right absolute right
height 24px height 24px
width 60px width 60px
border-width 0 1px border-width 0 1px
border-style solid border-style solid
border-color $nav-border-color border-color $ui-borderColor
background-color transparent
color $nav-inactive-text-color
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
color $nav-inactive-text-color
&:active
background-color $nav-active-background
color $nav-text-color
.update .update
navButtonColor()
position absolute position absolute
right 60px right 60px
height 24px height 24px
border-width 0 0 0 1px border-width 0 0 0 1px
border-style solid border-style solid
border-color $nav-border-color border-color $ui-borderColor
background-color transparent
color $brand-color
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
color $brand-color
&:active
background-color $nav-active-background
color $brand-color

48
browser/styles/index.styl
View File

@@ -3,6 +3,27 @@ $brand-color = #2BAC8F
$danger-color = red $danger-color = red
$danger-lighten-color = #FFE5E6 $danger-lighten-color = #FFE5E6
// UI default
$ui-text-color = #515151
$ui-inactive-text-color = #939395
$ui-borderColor = #D1D1D1
$ui-backgroundColor = #FAFAFA
$ui-border = solid 1px $ui-borderColor
// UI Button
$ui-button-color = #939395
$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
$ui-button--active-color = #515151
$ui-button--active-backgroundColor = alpha(#E0E0E0, 90%)
// UI Tooltip
$ui-tooltip-backgroundColor = alpha(#444, 70%)
$ui-tooltip-button-backgroundColor = #D1D1D1
$ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
// UI Input
$ui-input--focus-borderColor = #369DCD
$ui-input--disabled-backgroundColor = #DDD
/* /*
* # Border * # Border
@@ -46,36 +67,23 @@ colorPrimaryButton()
&:active:hover &:active:hover
background-color $primary-button-background--active background-color $primary-button-background--active
/**
* Input
*/
$disabled-input-background = #DDD
/** /**
* Nav * Nav
*/ */
$nav-text-color = #515151
$nav-inactive-text-color = #939395
$nav-hover-background = rgba(126, 127, 129, 0.08)
$nav-active-background = alpha(#E0E0E0, 90%)
$nav-border-color = #D1D1D1
$nav-background-color = #FAFAFA
$nav-tooltip-background-color = alpha(#444, 70%)
$nav-tooltip-button-background = #D1D1D1
$nav-tooltip-button-background--hover = lighten(#D1D1D1, 30%)
navButtonColor() navButtonColor()
border none border none
color $nav-inactive-text-color color $ui-button-color
background-color transparent background-color transparent
transition color background-color 0.15s transition color background-color 0.15s
&:hover &:hover
background-color $nav-hover-background background-color $ui-button--hover-backgroundColor
&:active &:active
background-color $nav-active-background background-color $ui-button--active-backgroundColor
color $nav-text-color color $ui-button--active-color
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
/** /**
* # Modal Stuff * # Modal Stuff