Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dashboards
Tabler
提交
4de166db
T
Tabler
项目概览
Dashboards
/
Tabler
大约 1 年 前同步成功
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
Tabler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
4de166db
编写于
5月 18, 2023
作者:
P
Paweł Kuna
提交者:
GitHub
5月 18, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Unified Box Shadows with Bootstrap Compatibility (#1586)
上级
6471d089
变更
14
隐藏空白更改
内联
并排
Showing
14 changed file
with
63 addition
and
35 deletion
+63
-35
.changeset/orange-donuts-cough.md
.changeset/orange-donuts-cough.md
+5
-0
src/scss/_variables.scss
src/scss/_variables.scss
+20
-21
src/scss/demo.scss
src/scss/demo.scss
+2
-2
src/scss/layout/_root.scss
src/scss/layout/_root.scss
+1
-1
src/scss/ui/_avatars.scss
src/scss/ui/_avatars.scss
+1
-1
src/scss/ui/_button-group.scss
src/scss/ui/_button-group.scss
+2
-0
src/scss/ui/_buttons.scss
src/scss/ui/_buttons.scss
+2
-4
src/scss/ui/_cards.scss
src/scss/ui/_cards.scss
+1
-1
src/scss/ui/_carousel.scss
src/scss/ui/_carousel.scss
+1
-1
src/scss/ui/_forms.scss
src/scss/ui/_forms.scss
+10
-0
src/scss/ui/forms/_form-check.scss
src/scss/ui/forms/_form-check.scss
+2
-1
src/scss/ui/forms/_form-selectgroup.scss
src/scss/ui/forms/_form-selectgroup.scss
+2
-0
src/scss/vendor/_litepicker.scss
src/scss/vendor/_litepicker.scss
+7
-3
src/scss/vendor/_tom-select.scss
src/scss/vendor/_tom-select.scss
+7
-0
未找到文件。
.changeset/orange-donuts-cough.md
0 → 100644
浏览文件 @
4de166db
---
"
@tabler/core"
:
patch
---
Unified Box Shadows with Bootstrap Compatibility
src/scss/_variables.scss
浏览文件 @
4de166db
...
...
@@ -13,7 +13,6 @@ $enable-cssgrid: true !default;
// DARK MODE
$color-mode-type
:
data
!
default
;
// ASSETS BASE
$assets-base
:
".."
!
default
;
...
...
@@ -435,24 +434,20 @@ $aspect-ratios: (
)
!
default
;
// Shadows
$shadow
:
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.04
)
0
2px
4px
0
!
default
;
$shadow-inset
:
inset
var
(
--
#{
$prefix
}
border-color-translucent
)
0
0
0
1px
!
default
;
$shadow-transparent
:
0
0
0
0
transparent
!
default
;
$shadow-button
:
0
1px
0
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.04
)
!
default
;
$shadow-button-inset
:
inset
0
-1px
0
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.2
)
!
default
;
$shadow-card
:
0
0
4px
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.04
)
!
default
;
$shadow-card-hover
:
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.16
)
0
2px
16px
0
!
default
;
$shadow-dropdown
:
0px
16px
24px
2px
rgb
(
0
,
0
,
0
,
0
.07
)
,
0px
6px
30px
5px
rgb
(
0
,
0
,
0
,
0
.06
)
,
0px
8px
10px
-5px
rgb
(
0
,
0
,
0
,
0
.1
)
!
default
;
$shadows
:
(
shadow
:
$shadow
,
shadow-transparent
:
$shadow-transparent
,
shadow-button
:
$shadow-button
,
shadow-button-inset
:
$shadow-button-inset
,
shadow-card
:
$shadow-card
,
shadow-card-hover
:
$shadow-card-hover
,
shadow-dropdown
:
$shadow-dropdown
,
$box-shadow
:
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.04
)
0
2px
4px
0
!
default
;
$box-shadow-transparent
:
0
0
0
0
transparent
!
default
;
$box-shadow-input
:
0
1px
1px
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.06
)
!
default
;
$box-shadow-card
:
0
0
4px
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.04
)
!
default
;
$box-shadow-card-hover
:
rgba
(
var
(
--
#{
$prefix
}
body-color-rgb
)
,
0
.16
)
0
2px
16px
0
!
default
;
$box-shadow-dropdown
:
0
16px
24px
2px
rgb
(
0
,
0
,
0
,
0
.07
)
,
0
6px
30px
5px
rgb
(
0
,
0
,
0
,
0
.06
)
,
0
8px
10px
-5px
rgb
(
0
,
0
,
0
,
0
.1
)
!
default
;
$box-shadows
:
(
box-shadow
:
$box-shadow
,
box-shadow-transparent
:
$box-shadow-transparent
,
box-shadow-input
:
$box-shadow-input
,
box-shadow-card
:
$box-shadow-card
,
box-shadow-card-hover
:
$box-shadow-card-hover
,
box-shadow-dropdown
:
$box-shadow-dropdown
,
)
!
default
;
$box-shadow-inset
:
0
0
transparent
!
default
;
...
...
@@ -539,6 +534,7 @@ $input-height-lg: null !default;
$input-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
$input-color
:
var
(
--
#{
$prefix
}
body-color
)
!
default
;
$input-focus-color
:
var
(
--
#{
$prefix
}
body-color
)
!
default
;
$input-box-shadow
:
var
(
--
#{
$prefix
}
box-shadow-input
)
!
default
;
// Buttons
$btn-disabled-opacity
:
0
.4
!
default
;
...
...
@@ -546,6 +542,7 @@ $btn-padding-x: 1rem !default;
$btn-font-weight
:
var
(
--
#{
$prefix
}
font-weight-medium
)
!
default
;
$btn-border-color
:
var
(
--
#{
$prefix
}
border-color
)
!
default
;
$btn-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
$btn-box-shadow
:
var
(
--
#{
$prefix
}
box-shadow-input
)
!
default
;
// Cards
$card-title-spacer-y
:
1
.25rem
!
default
;
...
...
@@ -838,13 +835,14 @@ $input-border-radius: var(--#{$prefix}border-radius) !default;
// Forms
$form-check-margin-bottom
:
0
.5rem
!
default
;
$form-check-input-width
:
1rem
!
default
;
$form-check-padding-start
:
$form-check-input-width
+
0
.5rem
!
default
;
$form-check-padding-start
:
1
.5rem
!
default
;
$form-check-input-width
:
1rem
!
default
;
$form-check-input-bg
:
var
(
--
#{
$prefix
}
bg-forms
)
!
default
;
$form-check-input-border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
$input-border-color-translucent
!
default
;
$form-check-input-border-radius
:
var
(
--
#{
$prefix
}
border-radius
)
!
default
;
$form-check-input-box-shadow
:
$input-box-shadow
!
default
;
$form-check-input-checked-bg-size
:
1rem
!
default
;
$form-check-input-checked-bg-color
:
var
(
--
#{
$prefix
}
primary
)
!
default
;
...
...
@@ -860,6 +858,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
$form-check-label-disabled-opacity
:
$text-muted-opacity
;
$form-select-indicator-color
:
$text-muted-light
!
default
;
$form-select-box-shadow
:
var
(
--
#{
$prefix
}
box-shadow-input
)
!
default
;
$form-switch-width
:
2rem
!
default
;
$form-switch-height
:
1
.125rem
!
default
;
...
...
src/scss/demo.scss
浏览文件 @
4de166db
...
...
@@ -104,7 +104,7 @@ $demo-icon-size: 4rem;
border-top-right-radius
:
0
;
border-bottom-right-radius
:
0
;
box-shadow
:
$shadow
;
box-shadow
:
$
box-
shadow
;
}
.settings-scheme
{
...
...
@@ -115,7 +115,7 @@ $demo-icon-size: 4rem;
position
:
relative
;
border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
var
(
--
#{
$prefix
}
border-color
);
box-shadow
:
$shadow
;
box-shadow
:
$
box-
shadow
;
&
-light
{
background
:
linear-gradient
(
135deg
,
$white
50%
,
$light
50%
);
...
...
src/scss/layout/_root.scss
浏览文件 @
4de166db
...
...
@@ -62,7 +62,7 @@
--
#{
$prefix
}
line-height-
#{
$name
}
:
#{
$value
}
;
}
@each
$name
,
$value
in
$shadows
{
@each
$name
,
$value
in
$
box-
shadows
{
--
#{
$prefix
}#{
$name
}
:
#{
$value
}
;
}
}
\ No newline at end of file
src/scss/ui/_avatars.scss
浏览文件 @
4de166db
.avatar
{
--
#{
$prefix
}
avatar-size
:
#{
$avatar-size
}
;
--
#{
$prefix
}
avatar-bg
:
#{
$avatar-bg
}
;
--
#{
$prefix
}
avatar-shadow
:
#{
$shadow-inset
}
;
--
#{
$prefix
}
avatar-shadow
:
#{
$
box-
shadow-inset
}
;
position
:
relative
;
width
:
var
(
--
#{
$prefix
}
avatar-size
);
height
:
var
(
--
#{
$prefix
}
avatar-size
);
...
...
src/scss/ui/_button-group.scss
浏览文件 @
4de166db
.btn-group
,
.btn-group-vertical
{
box-shadow
:
$input-box-shadow
;
>
.btn-check
:checked
+
.btn
,
>
.btn
:active
,
>
.btn.active
{
...
...
src/scss/ui/_buttons.scss
浏览文件 @
4de166db
...
...
@@ -2,15 +2,13 @@
// Button
//
.btn
{
--
#{
$prefix
}
btn-bg
:
var
(
--
#{
$prefix
}
bg-surface
)
;
--
#{
$prefix
}
btn-hover-bg
:
var
(
--
#{
$prefix
}
bg-surface
)
;
--
#{
$prefix
}
btn-icon-size
:
#{
$icon-size
}
;
--
#{
$prefix
}
btn-bg
:
var
(
--
#{
$prefix
}
bg-surface
)
;
--
#{
$prefix
}
btn-color
:
var
(
--
#{
$prefix
}
body-color
)
;
--
#{
$prefix
}
btn-border-color
:
#{
$btn-border-color
}
;
--
#{
$prefix
}
btn-hover-bg
:
var
(
--
#{
$prefix
}
btn-bg
)
;
--
#{
$prefix
}
btn-hover-border-color
:
var
(
--
#{
$prefix
}
border-color-active
)
;
--
#{
$prefix
}
btn-box-shadow
:
var
(
--
#{
$prefix
}
shadow-button
)
;
--
#{
$prefix
}
btn-box-shadow
:
var
(
--
#{
$prefix
}
box-shadow-input
)
;
--
#{
$prefix
}
btn-active-color
:
#{
$active-color
}
;
--
#{
$prefix
}
btn-active-bg
:
#{
$active-bg
}
;
--
#{
$prefix
}
btn-active-border-color
:
#{
$active-border-color
}
;
...
...
@@ -90,7 +88,7 @@
--
#{
$prefix
}
btn-active-bg
:
rgba
(
var
(
--
#{
$prefix
}#{
$color
}
-rgb
),
.8
)
;
--
#{
$prefix
}
btn-disabled-bg
:
var
(
--
#{
$prefix
}#{
$color
}
)
;
--
#{
$prefix
}
btn-disabled-color
:
var
(
--
#{
$prefix
}#{
$color
}
-fg
)
;
--
#{
$prefix
}
btn-box-shadow
:
var
(
--
#{
$prefix
}
shadow-button
),
var
(
--
#{
$prefix
}
shadow-button-inse
t
)
;
--
#{
$prefix
}
btn-box-shadow
:
var
(
--
#{
$prefix
}
box-shadow-inpu
t
)
;
}
.btn-outline-
#{
$color
}
{
...
...
src/scss/ui/_cards.scss
浏览文件 @
4de166db
...
...
@@ -11,7 +11,7 @@
&
:hover
{
text-decoration
:
none
;
box-shadow
:
$shadow-card-hover
;
box-shadow
:
$
box-
shadow-card-hover
;
}
}
...
...
src/scss/ui/_carousel.scss
浏览文件 @
4de166db
...
...
@@ -35,7 +35,7 @@
background
:
no-repeat
center
/
cover
;
border
:
0
;
border-radius
:
var
(
--
#{
$prefix
}
border-radius
);
box-shadow
:
$shadow
;
box-shadow
:
$
box-
shadow
;
margin
:
0
$carousel-indicator-spacer
;
opacity
:
$carousel-indicator-thumb-opacity
;
...
...
src/scss/ui/_forms.scss
浏览文件 @
4de166db
...
...
@@ -161,6 +161,16 @@ Form help
/**
Input group
*/
.input-group
{
box-shadow
:
$input-box-shadow
;
border-radius
:
$input-border-radius
;
.form-control
,
.btn
{
box-shadow
:
none
;
}
}
.input-group-link
{
font-size
:
$h5-font-size
;
}
...
...
src/scss/ui/forms/_form-check.scss
浏览文件 @
4de166db
...
...
@@ -24,7 +24,8 @@ Form check
.form-check-input
{
background-size
:
$form-check-input-width
;
margin-top
:
(
$form-check-min-height
-
$form-check-input-width
)
*
.5
;
box-shadow
:
$form-check-input-box-shadow
;
.form-switch
&
{
@include
transition
(
background-color
$transition-time
,
background-position
$transition-time
);
}
...
...
src/scss/ui/forms/_form-selectgroup.scss
浏览文件 @
4de166db
...
...
@@ -43,6 +43,7 @@ Select group
user-select
:
none
;
border
:
var
(
--
#{
$prefix
}
border-width
)
var
(
--
#{
$prefix
}
border-style
)
$input-border-color
;
border-radius
:
3px
;
box-shadow
:
$input-box-shadow
;
@include
transition
(
border-color
$transition-time
,
background
$transition-time
,
color
$transition-time
);
.icon
:only-child
{
...
...
@@ -60,6 +61,7 @@ Select group
height
:
$form-check-input-width
;
border
:
$form-check-input-border
;
vertical-align
:
middle
;
box-shadow
:
$form-check-input-box-shadow
;
.form-selectgroup-input
[
type
=
"checkbox"
]
+
.form-selectgroup-label
&
{
border-radius
:
$form-check-input-border-radius
;
...
...
src/scss/vendor/_litepicker.scss
浏览文件 @
4de166db
...
...
@@ -50,9 +50,13 @@
}
}
.datepicker-inline
&
.container__months
{
box-shadow
:
none
;
background-color
:
var
(
--
#{
$prefix
}
bg-forms
);
.datepicker-inline
&
{
box-shadow
:
$input-box-shadow
;
.container__months
{
box-shadow
:
none
;
background-color
:
var
(
--
#{
$prefix
}
bg-forms
);
}
}
}
src/scss/vendor/_tom-select.scss
浏览文件 @
4de166db
...
...
@@ -23,6 +23,13 @@ $input-border-width: 1px;
}
.ts-wrapper
{
.form-control
,
.form-select
,
&
.form-control
,
&
.form-select
{
box-shadow
:
$input-box-shadow
;
}
&
.is-invalid
,
&
.is-valid
{
.ts-control
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录