Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
0a52c40b
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,发现更多精彩内容 >>
提交
0a52c40b
编写于
1月 16, 2017
作者:
A
Annabel Dunstone Gray
浏览文件
操作
浏览文件
下载
差异文件
Merge branch '26207-add-hover-animations' into 'master'
Resolve "Add Hover animations" Closes #26207 See merge request !8415
上级
3e013664
2f5593d7
变更
12
显示空白变更内容
内联
并排
Showing
12 changed file
with
145 addition
and
9 deletion
+145
-9
app/assets/stylesheets/framework/animations.scss
app/assets/stylesheets/framework/animations.scss
+74
-0
app/assets/stylesheets/framework/avatar.scss
app/assets/stylesheets/framework/avatar.scss
+4
-0
app/assets/stylesheets/framework/header.scss
app/assets/stylesheets/framework/header.scss
+12
-1
app/assets/stylesheets/framework/nav.scss
app/assets/stylesheets/framework/nav.scss
+1
-1
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+8
-1
app/assets/stylesheets/pages/cycle_analytics.scss
app/assets/stylesheets/pages/cycle_analytics.scss
+4
-0
app/assets/stylesheets/pages/issuable.scss
app/assets/stylesheets/pages/issuable.scss
+6
-2
app/assets/stylesheets/pages/labels.scss
app/assets/stylesheets/pages/labels.scss
+4
-0
app/assets/stylesheets/pages/profile.scss
app/assets/stylesheets/pages/profile.scss
+12
-3
app/assets/stylesheets/pages/search.scss
app/assets/stylesheets/pages/search.scss
+14
-0
app/views/profiles/show.html.haml
app/views/profiles/show.html.haml
+2
-1
changelogs/unreleased/26207-add-hover-animations.yml
changelogs/unreleased/26207-add-hover-animations.yml
+4
-0
未找到文件。
app/assets/stylesheets/framework/animations.scss
浏览文件 @
0a52c40b
...
...
@@ -50,3 +50,77 @@
.pulse
{
@include
webkit-prefix
(
animation-name
,
pulse
);
}
/*
* General hover animations
*/
// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
// Usage: @include transition(width, height 0.3s ease-in-out);
// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
// transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin
transition
(
$transitions
...
)
{
$unfoldedTransitions
:
();
@each
$transition
in
$transitions
{
$unfoldedTransitions
:
append
(
$unfoldedTransitions
,
unfoldTransition
(
$transition
)
,
comma
);
}
transition
:
$unfoldedTransitions
;
}
@function
unfoldTransition
(
$transition
)
{
// Default values
$property
:
all
;
$duration
:
$general-hover-transition-duration
;
$easing
:
$general-hover-transition-curve
;
// Browser default is ease, which is what we want
$delay
:
null
;
// Browser default is 0, which is what we want
$defaultProperties
:
(
$property
,
$duration
,
$easing
,
$delay
);
// Grab transition properties if they exist
$unfoldedTransition
:
();
@for
$i
from
1
through
length
(
$defaultProperties
)
{
$p
:
null
;
@if
$i
<=
length
(
$transition
)
{
$p
:
nth
(
$transition
,
$i
);
}
@else
{
$p
:
nth
(
$defaultProperties
,
$i
);
}
$unfoldedTransition
:
append
(
$unfoldedTransition
,
$p
);
}
@return
$unfoldedTransition
;
}
.btn
,
.side-nav-toggle
{
@include
transition
(
background-color
,
border-color
,
color
,
box-shadow
);
}
.dropdown-menu-toggle
,
.avatar-circle
,
.header-user-avatar
{
@include
transition
(
border-color
);
}
.note-action-button
.link-highlight
,
.toolbar-btn
,
.dropdown-toggle-caret
,
.fa
:not
(
.fa-bell
)
{
@include
transition
(
color
);
}
a
{
@include
transition
(
background-color
,
color
,
border
);
}
.tree-table
td
,
.well-list
>
li
{
@include
transition
(
background-color
,
border-color
);
}
.stage-nav-item
{
@include
transition
(
background-color
,
box-shadow
);
}
app/assets/stylesheets/framework/avatar.scss
浏览文件 @
0a52c40b
...
...
@@ -52,6 +52,10 @@
border-radius
:
0
;
border
:
none
;
}
&
:not
([
href
])
:hover
{
border-color
:
rgba
(
$avatar-border
,
.2
);
}
}
.identicon
{
...
...
app/assets/stylesheets/framework/header.scss
浏览文件 @
0a52c40b
...
...
@@ -57,6 +57,14 @@ header {
&
.header-user-dropdown-toggle
{
margin-left
:
14px
;
&
:hover
,
&
:focus
,
&
:active
{
.header-user-avatar
{
border-color
:
rgba
(
$avatar-border
,
.2
);
}
}
}
&
:hover
,
...
...
@@ -104,6 +112,7 @@ header {
&
:hover
{
background-color
:
$white-normal
;
color
:
$gl-header-nav-hover-color
;
}
}
}
...
...
@@ -180,6 +189,7 @@ header {
&
:hover
{
text-decoration
:
underline
;
color
:
$gl-header-nav-hover-color
;
}
}
...
...
@@ -198,7 +208,7 @@ header {
cursor
:
pointer
;
&
:hover
{
color
:
darken
(
$color
:
$gl-text-color
,
$amount
:
30%
)
;
color
:
$gl-header-nav-hover-color
;
}
}
...
...
@@ -271,4 +281,5 @@ header {
float
:
left
;
margin-right
:
5px
;
border-radius
:
50%
;
border
:
1px
solid
$avatar-border
;
}
app/assets/stylesheets/framework/nav.scss
浏览文件 @
0a52c40b
...
...
@@ -101,7 +101,7 @@
&
:hover
,
&
:active
,
&
:focus
{
border-
bottom
:
none
;
border-
color
:
transparent
;
}
}
}
...
...
app/assets/stylesheets/framework/variables.scss
浏览文件 @
0a52c40b
...
...
@@ -102,6 +102,10 @@ $gl-text-red: #d12f19;
$gl-text-orange
:
#d90
;
$gl-link-color
:
#3777b0
;
$gl-grayish-blue
:
#7f8fa4
;
$gl-gray
:
$gl-text-color
;
$gl-gray-dark
:
#313236
;
$gl-header-color
:
#4c4e54
;
$gl-header-nav-hover-color
:
#434343
;
/*
* Lists
...
...
@@ -172,6 +176,9 @@ $count-arrow-border: #dce0e5;
$save-project-loader-color
:
#555
;
$divergence-graph-bar-bg
:
#ccc
;
$divergence-graph-separator-bg
:
#ccc
;
$general-hover-transition-duration
:
150ms
;
$general-hover-transition-curve
:
linear
;
/*
* Common component specific colors
...
...
app/assets/stylesheets/pages/cycle_analytics.scss
浏览文件 @
0a52c40b
...
...
@@ -20,6 +20,10 @@
.fa
{
color
:
$cycle-analytics-light-gray
;
&
:hover
{
color
:
$gl-text-color
;
}
}
.stage-header
{
...
...
app/assets/stylesheets/pages/issuable.scss
浏览文件 @
0a52c40b
...
...
@@ -154,8 +154,8 @@
.edit-link
{
color
:
$gl-text-color
;
&
:hover
{
color
:
$md-link-color
;
&
:
not
([
href
])
:
hover
{
color
:
rgba
(
$avatar-border
,
.2
)
;
}
}
}
...
...
@@ -332,6 +332,10 @@
&
:hover
{
color
:
$md-link-color
;
text-decoration
:
none
;
.avatar
{
border-color
:
rgba
(
$avatar-border
,
.2
);
}
}
}
...
...
app/assets/stylesheets/pages/labels.scss
浏览文件 @
0a52c40b
...
...
@@ -203,6 +203,10 @@
z-index
:
3
;
border-radius
:
$label-border-radius
;
padding
:
6px
10px
6px
9px
;
&
:hover
{
box-shadow
:
inset
0
0
0
80px
$label-remove-border
;
}
}
.btn
{
...
...
app/assets/stylesheets/pages/profile.scss
浏览文件 @
0a52c40b
...
...
@@ -216,8 +216,8 @@
}
}
.user-profile
{
.user-profile
{
.cover-controls
a
{
margin-left
:
5px
;
}
...
...
@@ -231,8 +231,11 @@
}
}
@media
(
max-width
:
$screen-xs-max
)
{
.user-profile-nav
{
font-size
:
0
;
}
@media
(
max-width
:
$screen-xs-max
)
{
.cover-block
{
padding-top
:
20px
;
}
...
...
@@ -253,6 +256,12 @@
}
}
}
.user-profile-nav
{
a
{
margin-right
:
0
;
}
}
}
}
...
...
app/assets/stylesheets/pages/search.scss
浏览文件 @
0a52c40b
...
...
@@ -14,6 +14,20 @@
}
}
.search
form
:hover
,
.file-finder-input
:hover
,
.issuable-search-form
:hover
,
.search-text-input
:hover
,
textarea
:hover
,
.form-control
:hover
{
border-color
:
lighten
(
$dropdown-input-focus-border
,
20%
);
box-shadow
:
0
0
4px
lighten
(
$search-input-focus-shadow-color
,
20%
);
}
input
[
type
=
"checkbox"
]
:hover
{
box-shadow
:
0
0
2px
2px
lighten
(
$search-input-focus-shadow-color
,
20%
)
,
0
0
0
1px
lighten
(
$search-input-focus-shadow-color
,
20%
);
}
.search
{
margin-right
:
10px
;
margin-left
:
10px
;
...
...
app/views/profiles/show.html.haml
浏览文件 @
0a52c40b
...
...
@@ -18,6 +18,7 @@
or change it at
#{
link_to
Gitlab
.
config
.
gravatar
.
host
,
"http://"
+
Gitlab
.
config
.
gravatar
.
host
}
.col-lg-9
.clearfix.avatar-image.append-bottom-default
=
link_to
avatar_icon
(
@user
,
400
),
target:
'_blank'
do
=
image_tag
avatar_icon
(
@user
,
160
),
alt:
''
,
class:
'avatar s160'
%h5
.prepend-top-0
Upload new avatar
...
...
changelogs/unreleased/26207-add-hover-animations.yml
0 → 100644
浏览文件 @
0a52c40b
---
title
:
Add various hover animations throughout the application
merge_request
:
author
:
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录