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

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

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

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

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

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

@@ -1,40 +1,23 @@
.root
absolute bottom left right
height 24px
border-top solid 1px $nav-border-color
background-color $nav-background-color
border-top $ui-border
background-color $ui-backgroundColor
.zoom
navButtonColor()
absolute right
height 24px
width 60px
border-width 0 1px
border-style solid
border-color $nav-border-color
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
border-color $ui-borderColor
.update
navButtonColor()
position absolute
right 60px
height 24px
border-width 0 0 0 1px
border-style solid
border-color $nav-border-color
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
border-color $ui-borderColor

48
browser/styles/index.styl
View File

@@ -3,6 +3,27 @@ $brand-color = #2BAC8F
$danger-color = red
$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
@@ -46,36 +67,23 @@ colorPrimaryButton()
&:active:hover
background-color $primary-button-background--active
/**
* Input
*/
$disabled-input-background = #DDD
/**
* 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()
border none
color $nav-inactive-text-color
color $ui-button-color
background-color transparent
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
background-color $ui-button--hover-backgroundColor
&:active
background-color $nav-active-background
color $nav-text-color
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
/**
* # Modal Stuff