Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
f841faf9
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f841faf9
编写于
7月 07, 2017
作者:
P
Pedro Moreira da Silva
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Change new nav purple to indigo
上级
9274c3c1
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
132 addition
and
73 deletion
+132
-73
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+11
-5
app/assets/stylesheets/new_nav.scss
app/assets/stylesheets/new_nav.scss
+42
-35
app/assets/stylesheets/new_sidebar.scss
app/assets/stylesheets/new_sidebar.scss
+79
-33
未找到文件。
app/assets/stylesheets/framework/variables.scss
浏览文件 @
f841faf9
...
@@ -74,11 +74,17 @@ $red-700: #a62d19;
...
@@ -74,11 +74,17 @@ $red-700: #a62d19;
$red-800
:
#8b2615
;
$red-800
:
#8b2615
;
$red-900
:
#711e11
;
$red-900
:
#711e11
;
$purple-600
:
#6e49cb
;
$indigo-50
:
#f7f7ff
;
$purple-650
:
#5c35ae
;
$indigo-100
:
#ebebfa
;
$purple-700
:
#4a2192
;
$indigo-200
:
#d1d1f0
;
$purple-800
:
#2c0a5c
;
$indigo-300
:
#a6a6de
;
$purple-900
:
#380d75
;
$indigo-400
:
#7c7ccc
;
$indigo-500
:
#6666c4
;
$indigo-600
:
#5b5bbd
;
$indigo-700
:
#4b4ba3
;
$indigo-800
:
#393982
;
$indigo-900
:
#292961
;
$indigo-950
:
#1a1a40
;
$black
:
#000
;
$black
:
#000
;
$black-transparent
:
rgba
(
0
,
0
,
0
,
0
.3
);
$black-transparent
:
rgba
(
0
,
0
,
0
,
0
.3
);
...
...
app/assets/stylesheets/new_nav.scss
浏览文件 @
f841faf9
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
header
.navbar-gitlab-new
{
header
.navbar-gitlab-new
{
color
:
$white-light
;
color
:
$white-light
;
background
-color
:
$purple-900
;
background
:
linear-gradient
(
to
right
,
$indigo-900
,
$indigo-800
)
;
border-bottom
:
0
;
border-bottom
:
0
;
.header-content
{
.header-content
{
...
@@ -24,11 +24,9 @@ header.navbar-gitlab-new {
...
@@ -24,11 +24,9 @@ header.navbar-gitlab-new {
>
a
{
>
a
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
padding-top
:
3px
;
padding-right
:
$gl-padding
;
padding-right
:
$gl-padding
;
padding-left
:
$gl-padding
;
padding-left
:
$gl-padding
;
margin-left
:
-
$gl-padding
;
margin-left
:
-
$gl-padding
;
border-bottom
:
3px
solid
transparent
;
@media
(
min-width
:
$screen-sm-min
)
{
@media
(
min-width
:
$screen-sm-min
)
{
padding-right
:
$gl-padding
;
padding-right
:
$gl-padding
;
...
@@ -45,9 +43,8 @@ header.navbar-gitlab-new {
...
@@ -45,9 +43,8 @@ header.navbar-gitlab-new {
&
:hover
,
&
:hover
,
&
:focus
{
&
:focus
{
color
:
currentColor
;
color
:
$tanuki-yellow
;
text-decoration
:
none
;
text-decoration
:
none
;
border-bottom-color
:
$white-light
;
}
}
}
}
}
}
...
@@ -71,7 +68,7 @@ header.navbar-gitlab-new {
...
@@ -71,7 +68,7 @@ header.navbar-gitlab-new {
.navbar-collapse
{
.navbar-collapse
{
padding-left
:
0
;
padding-left
:
0
;
color
:
$
white-light
;
color
:
$
indigo-200
;
box-shadow
:
0
;
box-shadow
:
0
;
@media
(
max-width
:
$screen-xs-max
)
{
@media
(
max-width
:
$screen-xs-max
)
{
...
@@ -101,7 +98,7 @@ header.navbar-gitlab-new {
...
@@ -101,7 +98,7 @@ header.navbar-gitlab-new {
font-size
:
14px
;
font-size
:
14px
;
text-align
:
center
;
text-align
:
center
;
color
:
currentColor
;
color
:
currentColor
;
border-left
:
1px
solid
lighten
(
$
purple
-700
,
10%
);
border-left
:
1px
solid
lighten
(
$
indigo
-700
,
10%
);
&
:hover
,
&
:hover
,
&
:focus
,
&
:focus
,
...
@@ -120,6 +117,7 @@ header.navbar-gitlab-new {
...
@@ -120,6 +117,7 @@ header.navbar-gitlab-new {
li
{
li
{
.badge
{
.badge
{
box-shadow
:
none
;
box-shadow
:
none
;
font-weight
:
600
;
}
}
}
}
}
}
...
@@ -133,12 +131,11 @@ header.navbar-gitlab-new {
...
@@ -133,12 +131,11 @@ header.navbar-gitlab-new {
>
a
{
>
a
{
background
:
none
;
background
:
none
;
opacity
:
.9
;
will-change
:
color
;
will-change
:
opacity
;
&
.header-user-dropdown-toggle
{
&
.header-user-dropdown-toggle
{
.header-user-avatar
{
.header-user-avatar
{
border-color
:
$
white-light
;
border-color
:
$
indigo-200
;
}
}
}
}
...
@@ -165,29 +162,34 @@ header.navbar-gitlab-new {
...
@@ -165,29 +162,34 @@ header.navbar-gitlab-new {
.navbar-sub-nav
{
.navbar-sub-nav
{
display
:
flex
;
display
:
flex
;
margin-bottom
:
0
;
margin-bottom
:
0
;
color
:
$
white-light
;
color
:
$
indigo-200
;
>
li
{
>
li
{
&
.active
>
a
,
>
a
:hover
,
a
:hover
,
>
a
:focus
{
a
:focus
{
box-shadow
:
inset
0
-3px
0
rgba
(
$indigo-200
,
.4
);
border-bottom-color
:
$white-light
;
text-decoration
:
none
;
text-decoration
:
none
;
outline
:
0
;
outline
:
0
;
opacity
:
1
;
color
:
$white-light
;
}
&
.active
>
a
{
box-shadow
:
inset
0
-3px
0
$indigo-500
;
color
:
$white-light
;
font-weight
:
700
;
}
}
>
a
{
>
a
{
display
:
block
;
display
:
block
;
padding
:
16px
10px
13px
;
padding
:
16px
10px
;
font-size
:
13px
;
font-size
:
13px
;
color
:
currentColor
;
color
:
currentColor
;
bo
rder-bottom
:
3px
solid
transparent
;
bo
x-shadow
:
inset
0
0
0
transparent
;
opacity
:
.9
;
will-change
:
box-shadow
;
will-change
:
opacity
;
transition
:
box-shadow
0
.15s
;
@media
(
min-width
:
$screen-sm-min
)
{
@media
(
min-width
:
$screen-sm-min
)
{
padding
:
15px
$gl-padding
12px
;
padding
:
15px
$gl-padding
;
font-size
:
14px
;
font-size
:
14px
;
}
}
}
}
...
@@ -207,55 +209,60 @@ header.navbar-gitlab-new {
...
@@ -207,55 +209,60 @@ header.navbar-gitlab-new {
.search
{
.search
{
form
{
form
{
border-color
:
$purple-800
;
border
:
0
;
background-color
:
rgba
(
$indigo-200
,
.2
);
transition
:
border-color
ease-in-out
0
.15s
,
box-shadow
ease-in-out
0
.15s
,
background-color
ease-in-out
0
.15s
;
&
:hover
{
&
:hover
{
b
order-color
:
rgba
(
$white-light
,
.6
);
b
ackground-color
:
rgba
(
$indigo-200
,
.3
);
box-shadow
:
none
;
box-shadow
:
none
;
}
}
}
}
&
.search-active
form
{
&
.search-active
form
{
border-color
:
$white-light
;
background-color
:
rgba
(
$indigo-200
,
.3
);
}
box-shadow
:
none
;
form
,
.search-input
{
background-color
:
$purple-700
;
}
}
.search-input
{
.search-input
{
color
:
$white-light
;
color
:
$white-light
;
background
:
none
;
}
}
.
search-input
:
:
placeholder
{
.
search-input
:
:
placeholder
{
color
:
rgba
(
$
white-light
,
.6
);
color
:
rgba
(
$
indigo-200
,
.8
);
}
}
.location-badge
{
.location-badge
{
font-size
:
12px
;
font-size
:
12px
;
color
:
rgba
(
$white-light
,
.6
)
;
color
:
$indigo-100
;
background-color
:
$purple-800
;
background-color
:
rgba
(
$indigo-200
,
.1
)
;
transition
:
color
0
.15s
;
transition
:
color
0
.15s
;
will-change
:
color
;
will-change
:
color
;
margin
:
-4px
4px
-4px
-4px
;
line-height
:
25px
;
padding
:
4px
8px
;
border-radius
:
2px
0
0
2px
;
border-right
:
1px
solid
$indigo-800
;
height
:
34px
;
}
}
.search-input-wrap
{
.search-input-wrap
{
.search-icon
,
.search-icon
,
.clear-icon
{
.clear-icon
{
color
:
rgba
(
$
white-light
,
.6
);
color
:
rgba
(
$
indigo-200
,
.8
);
}
}
}
}
&
.search-active
{
&
.search-active
{
.location-badge
{
.location-badge
{
color
:
$white-light
;
color
:
$white-light
;
background-color
:
$purple-800
;
background-color
:
rgba
(
$indigo-200
,
.2
)
;
}
}
.search-input-wrap
{
.search-input-wrap
{
.search-icon
{
.search-icon
{
color
:
rgba
(
$
white-light
,
.6
);
color
:
rgba
(
$
indigo-200
,
.8
);
}
}
.clear-icon
{
.clear-icon
{
...
...
app/assets/stylesheets/new_sidebar.scss
浏览文件 @
f841faf9
...
@@ -2,6 +2,15 @@
...
@@ -2,6 +2,15 @@
@import
'framework/tw_bootstrap_variables'
;
@import
'framework/tw_bootstrap_variables'
;
@import
"bootstrap/variables"
;
@import
"bootstrap/variables"
;
$active-background
:
rgba
(
0
,
0
,
0
,.
04
);
$active-border
:
$indigo-500
;
$active-color
:
$indigo-700
;
$active-hover-background
:
$active-background
;
$active-hover-color
:
$gl-text-color
;
$inactive-badge-background
:
rgba
(
0
,
0
,
0
,.
08
);
$hover-background
:
$indigo-700
;
$hover-color
:
$white-light
;
$inactive-color
:
$gl-text-color-secondary
;
$new-sidebar-width
:
220px
;
$new-sidebar-width
:
220px
;
.page-with-new-sidebar
{
.page-with-new-sidebar
{
...
@@ -17,24 +26,39 @@ $new-sidebar-width: 220px;
...
@@ -17,24 +26,39 @@ $new-sidebar-width: 220px;
}
}
.context-header
{
.context-header
{
background-color
:
$gray-normal
;
border-bottom
:
1px
solid
$border-color
;
border-bottom
:
1px
solid
$border-color
;
font-weight
:
600
;
font-weight
:
600
;
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
padding
:
10px
14px
;
padding
:
10px
16px
10px
10px
;
color
:
$gl-text-color
;
.avatar-container
{
.avatar-container
{
flex
:
0
0
40px
;
flex
:
0
0
40px
;
}
}
&
:hover
{
&
:hover
{
background-color
:
$border-color
;
background-color
:
$hover-background
;
color
:
$hover-color
;
border-color
:
$hover-background
;
.avatar-container
{
border-color
:
transparent
;
}
.settings-avatar
{
background-color
:
$indigo-500
;
i
{
color
:
$hover-color
;
}
}
}
}
}
}
.settings-avatar
{
.settings-avatar
{
background-color
:
$white-light
;
background-color
:
$white-light
;
transition
:
background-color
100ms
linear
;
i
{
i
{
font-size
:
20px
;
font-size
:
20px
;
...
@@ -42,6 +66,7 @@ $new-sidebar-width: 220px;
...
@@ -42,6 +66,7 @@ $new-sidebar-width: 220px;
color
:
$gl-text-color-secondary
;
color
:
$gl-text-color-secondary
;
text-align
:
center
;
text-align
:
center
;
align-self
:
center
;
align-self
:
center
;
transition
:
color
100ms
linear
;
}
}
}
}
...
@@ -54,11 +79,15 @@ $new-sidebar-width: 220px;
...
@@ -54,11 +79,15 @@ $new-sidebar-width: 220px;
bottom
:
0
;
bottom
:
0
;
left
:
0
;
left
:
0
;
overflow
:
auto
;
overflow
:
auto
;
background-color
:
$gray-light
;
background-color
:
$gray-normal
;
border-right
:
1px
solid
$border-color
;
box-shadow
:
inset
-2px
0
0
$border-color
;
a
{
text-decoration
:
none
;
}
ul
{
ul
{
padding
:
0
;
padding
-left
:
0
;
list-style
:
none
;
list-style
:
none
;
}
}
...
@@ -67,13 +96,18 @@ $new-sidebar-width: 220px;
...
@@ -67,13 +96,18 @@ $new-sidebar-width: 220px;
a
{
a
{
display
:
block
;
display
:
block
;
padding
:
12px
14px
;
padding
:
12px
16px
;
color
:
$inactive-color
;
}
}
}
}
a
{
li
.active
{
color
:
$gl-text-color
;
box-shadow
:
inset
4px
0
0
$active-border
;
text-decoration
:
none
;
>
a
{
color
:
$active-color
;
font-weight
:
700
;
}
}
}
@media
(
max-width
:
$screen-xs-max
)
{
@media
(
max-width
:
$screen-xs-max
)
{
...
@@ -83,22 +117,28 @@ $new-sidebar-width: 220px;
...
@@ -83,22 +117,28 @@ $new-sidebar-width: 220px;
.sidebar-sub-level-items
{
.sidebar-sub-level-items
{
display
:
none
;
display
:
none
;
padding-bottom
:
8px
;
>
li
{
>
li
{
a
{
a
{
padding
:
12px
24
px
;
font-size
:
12
px
;
color
:
$gl-text-color-light
;
padding
:
8px
16px
8px
24px
;
&
:hover
{
&
:hover
,
color
:
$gl-text-color
;
&
:focus
{
background-color
:
$border-color
;
background
:
$active-hover-background
;
color
:
$active-hover-color
;
}
}
}
}
&
.active
{
&
.active
{
>
a
{
a
{
color
:
$purple-650
;
&
,
font-weight
:
600
;
&
:hover
,
&
:focus
{
background
:
$active-background
;
color
:
$active-color
;
}
}
}
}
}
}
}
...
@@ -108,35 +148,31 @@ $new-sidebar-width: 220px;
...
@@ -108,35 +148,31 @@ $new-sidebar-width: 220px;
>
li
{
>
li
{
.badge
{
.badge
{
float
:
right
;
float
:
right
;
background-color
:
$
border-color
;
background-color
:
$
inactive-badge-background
;
color
:
$
gl-text
-color
;
color
:
$
inactive
-color
;
}
}
&
.active
{
&
.active
{
>
a
{
background
:
$active-background
;
background-color
:
$purple-600
;
color
:
$white-light
;
font-weight
:
600
;
}
.badge
{
.badge
{
background-color
:
$purple-700
;
color
:
$active-color
;
color
:
$white-light
;
font-weight
:
600
;
}
}
.sidebar-sub-level-items
{
.sidebar-sub-level-items
{
background-color
:
$gray-normal
;
border-left
:
6px
solid
$purple-600
;
display
:
block
;
display
:
block
;
}
}
}
}
&
:not
(
.active
)
>
a
:hover
{
>
a
:hover
{
background-color
:
$border-color
;
background-color
:
$hover-background
;
color
:
$hover-color
;
.badge
{
.badge
{
transition
:
background-color
100ms
linear
;
transition
:
background-color
100ms
linear
,
color
100ms
linear
;
background-color
:
$gray-normal
;
background-color
:
$indigo-500
;
color
:
$hover-color
;
}
}
}
}
}
}
...
@@ -155,3 +191,13 @@ $new-sidebar-width: 220px;
...
@@ -155,3 +191,13 @@ $new-sidebar-width: 220px;
// scss-lint:enable DuplicateProperty
// scss-lint:enable DuplicateProperty
}
}
}
}
// Change color of all horizontal tabs to match the new indigo color
.nav-links
li
.active
a
{
border-bottom-color
:
$active-border
;
.badge
{
font-weight
:
600
;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录