提交 8d9ee463 编写于 作者: WodahsOrez's avatar WodahsOrez

update: 颜色变量,按钮样式

上级 f8ae7a25
......@@ -72,21 +72,7 @@
background-color: transparent;
gap: 10px;
.ivu-btn {
width: 110px;
height: 34px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 20px;
margin: 20px 0;
background: var(--app-color-white);
border: 1px solid var(--app-color-blue);
border-radius: 0;
}
.ivu-btn-primary {
background: var(--app-color-blue);
color: var(--app-color-white);
}
}
>.view-content {
......
......@@ -61,21 +61,7 @@
background-color: transparent;
gap: 10px;
.ivu-btn {
width: 110px;
height: 34px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 20px;
margin: 16px 0;
background: var(--app-color-white);
border: 1px solid var(--app-color-blue);
border-radius: 0;
}
.ivu-btn-primary {
background: var(--app-color-blue);
color: var(--app-color-white);
}
}
.view-content {
......
......@@ -16,5 +16,11 @@
>.view-footer {
flex: auto;
height: 40px;
.ivu-btn {
height: var(--ey-confirm-button-height);
font-size: var(--ey-confirm-button-font-size);
padding: var(--ey-confirm-button-padding);
border-radius: var(--ey-confirm-button-radius);
}
}
}
\ No newline at end of file
......@@ -80,17 +80,11 @@
margin-top: 0;
display: flex;
justify-content: flex-end;
.ivu-btn:nth-child(1){
border: none;
background-color: var(--app-color-gray-200);
color: var(--app-color-black);
font-size: 14px;
}
.ivu-btn:nth-child(2){
border: none;
background-color: var(--app-color-blue);
color: var(--app-color-white);
font-size: 14px;
.ivu-btn {
height: var(--ey-confirm-button-height);
font-size: var(--ey-confirm-button-font-size);
padding: var(--ey-confirm-button-padding);
border-radius: var(--ey-confirm-button-radius);
}
}
}
\ No newline at end of file
.ivu-btn {
min-width: 110px;
height: 34px;
min-width: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 20px;
background: var(--app-color-white);
border: 1px solid var(--app-color-gray-250);
border-radius: 0;
background: var(--ey-ghost-button-color);
border: 1px solid var(--ey-ghost-button-border-color);
color: var(--ey-ghost-button-font-color);
height: var(--ey-medium-button-height);
font-size: var(--ey-medium-button-font-size);
padding: var(--ey-medium-button-padding);
border-radius: var(--ey-medium-button-radius);
z-index: 0;
.caption {
margin-left: 4px;
}
&:hover {
color: var(--app-color-blue);
border-color: var(--app-color-blue);
background: var(--ey-ghost-button-hover-color);
border: 1px solid var(--ey-ghost-button-hover-border-color);
color: var(--ey-ghost-button-hover-font-color);
}
&.ivu-btn-primary {
background-color: var(--app-color-blue);
color: var(--app-color-white);
&[disabled] {
background: var(--ey-ghost-button-disabled-color);
border: 1px solid var(--ey-ghost-button-disabled-border-color);
color: var(--ey-ghost-button-disabled-font-color);
}
// 重要按钮样式
&.ivu-btn-primary,
&.srfactionlevel250 {
background-color: var(--app-color-blue);
color: var(--app-color-white);
background: var(--ey-button-color);
border: 1px solid var(--ey-button-border-color);
color: var(--ey-button-font-color);
&:hover {
background: var(--ey-button-hover-color);
border: 1px solid var(--ey-button-hover-border-color);
color: var(--ey-button-hover-font-color);
}
&[disabled] {
background: var(--app-color-gray-250);
background: var(--ey-button-disabled-color);
border: 1px solid var(--ey-button-disabled-border-color);
color: var(--ey-button-disabled-font-color);
}
}
}
\ No newline at end of file
......@@ -30,3 +30,92 @@
// 安永默认行高
--app-line-height: 22px;
}
// 安永新标准颜色变量
:root {
// 安永黑
--ey-color-black: #2E2E38;
// 安永灰1
--ey-color-gray-100: #747480;
// 安永灰2
--ey-color-gray-200: #C4C4CD;
// 安永灰2 50%
--ey-color-gray-250: #E1E1E6;
// 安永灰4
--ey-color-gray-400: #F6F6FA;
// 安永白
--ey-color-white: #FFFFFF;
// 安永蓝
--ey-color-blue: #188CE5;
// 安永黄
--ey-color-yellow: #FFE600;
// 安永橙
--ey-color-orange: #FF810A;
// 安永蓝绿
--ey-color-blue-green: #27ACAA;
// 安永蓝绿10%
--ey-color-blue-green-110: #27acaa1a;
// 按钮颜色
--ey-button-color: var(--ey-color-blue-green);
--ey-button-border-color: var(--ey-color-blue-green);
--ey-button-font-color: var(--ey-color-white);
// 按钮hover颜色
--ey-button-hover-color: #1F7D84;
--ey-button-hover-border-color: #1F7D84;
--ey-button-hover-font-color: var(--ey-color-white);
// 按钮disabled颜色
--ey-button-disabled-color: var(--ey-color-gray-200);
--ey-button-disabled-border-color: var(--ey-color-gray-200);
--ey-button-disabled-font-color: var(--ey-color-white);
// 幽灵按钮颜色
--ey-ghost-button-color: var(--ey-color-white);
--ey-ghost-button-border-color: var(--ey-color-blue-green);
--ey-ghost-button-font-color: var(--ey-color-blue-green);
// 幽灵按钮hover颜色
--ey-ghost-button-hover-color: var(--ey-color-blue-green);
--ey-ghost-button-hover-border-color: var(--ey-color-blue-green);
--ey-ghost-button-hover-font-color: var(--ey-color-white);
// 幽灵按钮disabled颜色
--ey-ghost-button-disabled-color: var(--ey-color-white);
--ey-ghost-button-disabled-border-color: var(--ey-color-gray-200);
--ey-ghost-button-disabled-font-color: var(--ey-color-gray-200);
// 中等尺寸按钮字体大小
--ey-medium-button-font-size: 18px;
// 中等尺寸按钮字体大小
--ey-medium-button-padding: 9px 15px;
// 中等尺寸按钮圆角
--ey-medium-button-radius: 6px;
// 中等尺寸按钮高度
--ey-medium-button-height: 36px;
// 大尺寸按钮字体大小
--ey-large-button-font-size: 22px;
// 大尺寸按钮字体大小
--ey-large-button-padding: 10px 20px;
// 大尺寸按钮圆角
--ey-large-button-radius: 6px;
// 大尺寸按钮高度
--ey-large-button-height: 41px;
// 小尺寸按钮字体大小
--ey-small-button-font-size: 12px;
// 小尺寸按钮字体大小
--ey-small-button-padding: 7px 15px;
// 小尺寸按钮圆角
--ey-small-button-radius: 4px;
// 小尺寸按钮高度
--ey-small-button-height: 24px;
// 确认框按钮字体大小
--ey-confirm-button-font-size: 14px;
// 确认框按钮字体大小
--ey-confirm-button-padding: 4px 36px;
// 确认框按钮圆角
--ey-confirm-button-radius: 4px;
// 确认框按钮高度
--ey-confirm-button-height: 30px;
}
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册