Skip to content

Commit

Permalink
更新按钮组件样式并移除重置样式和主题变量文件内容
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZRMYDYCG
ZRMYDYCG committed Feb 14, 2025
1 parent 93473cb commit ab21840
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 381 deletions.
207 changes: 0 additions & 207 deletions packages/components/Button/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,207 +0,0 @@
.bre-button-group {
--bre-button-group-border-color: var(--bre-border-color-lighter);
}

.bre-button {
--bre-button-font-weight: var(--bre-font-weight-primary);
--bre-button-border-color: var(--bre-border-color);
--bre-button-bg-color: var(--bre-fill-color-blank);
--bre-button-text-color: var(--bre-text-color-regular);
--bre-button-disabled-text-color: var(--bre-disabled-text-color);
--bre-button-disabled-bg-color: var(--bre-fill-color-blank);
--bre-button-disabled-border-color: var(--bre-border-color-light);
--bre-button-hover-text-color: var(--bre-color-primary);
--bre-button-hover-bg-color: var(--bre-color-primary-light-9);
--bre-button-hover-border-color: var(--bre-color-primary-light-7);
--bre-button-active-text-color: var(--bre-button-hover-text-color);
--bre-button-active-border-color: var(--bre-color-primary);
--bre-button-active-bg-color: var(--bre-button-hover-bg-color);
--bre-button-outline-color: var(--bre-color-primary-light-5);
--bre-button-active-color: var(--bre-text-color-primary);
}

.bre-button {
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
height: 32px;
white-space: nowrap;
cursor: pointer;
color: var(--bre-button-text-color);
text-align: center;
box-sizing: border-box;
outline: none;
transition: 0.1s;
font-weight: var(--bre-button-font-weight);
user-select: none;
vertical-align: middle;
-webkit-appearance: none;
background-color: var(--bre-button-bg-color);
border: var(--bre-border);
border-color: var(--bre-button-border-color);
padding: 8px 15px;
font-size: var(--bre-font-size-base);
border-radius: var(--bre-border-radius-base);
}

.bre-button + .bre-button {
margin-left: 12px;
}

.bre-button:hover,
.bre-button:focus {
color: var(--bre-button-hover-text-color);
border-color: var(--bre-button-hover-border-color);
background-color: var(--bre-button-hover-bg-color);
outline: none;
}

.bre-button:active {
color: var(--bre-button-active-text-color);
border-color: var(--bre-button-active-border-color);
background-color: var(--bre-button-active-bg-color);
outline: none;
}

/*plain*/
.bre-button.is-plain {
--bre-button-hover-text-color: var(--bre-color-primary);
--bre-button-hover-bg-color: var(--bre-fill-color-blank);
--bre-button-hover-border-color: var(--bre-color-primary);
}

/*round*/
.bre-button.is-round {
border-radius: var(--bre-border-radius-round);
}

/*circle*/
.bre-button.is-circle {
border-radius: 50%;
padding: 8px;
}

/*disabled*/
.bre-button.is-loading,
.bre-button.is-disabled,
.bre-button.is-disabled:hover,
.bre-button.is-disabled:focus,
.bre-button[disabled],
.bre-button[disabled]:hover,
.bre-button[disabled]:focus {
color: var(--bre-button-disabled-text-color);
cursor: not-allowed;
background-image: none;
background-color: var(--bre-button-disabled-bg-color);
border-color: var(--bre-button-disabled-border-color);
}

.bre-button [class*='bre-icon'] {
width: 1em;
height: 1em;
}

@each $val in primary, success, warning, info, danger {
.bre-button--#{$val} {
--bre-button-text-color: var(--bre-color-white);
--bre-button-bg-color: var(--bre-color-#{$val});
--bre-button-border-color: var(--bre-color-#{$val});
--bre-button-outline-color: var(--bre-color-#{$val}-light-5);
--bre-button-active-color: var(--bre-color-#{$val}-dark-2);
--bre-button-hover-text-color: var(--bre-color-white);
--bre-button-hover-bg-color: var(--bre-color-#{$val}-light-3);
--bre-button-hover-border-color: var(--bre-color-#{$val}-light-3);
--bre-button-active-bg-color: var(--bre-color-#{$val}-dark-2);
--bre-button-active-border-color: var(--bre-color-#{$val}-dark-2);
--bre-button-disabled-text-color: var(--bre-color-white);
--bre-button-disabled-bg-color: var(--bre-color-#{$val}-light-5);
--bre-button-disabled-border-color: var(--bre-color-#{$val}-light-5);
}

.bre-button--#{$val}.is-plain {
--bre-button-text-color: var(--bre-color-#{$val});
--bre-button-bg-color: var(--bre-color-#{$val}-light-9);
--bre-button-border-color: var(--bre-color-#{$val}-light-5);
--bre-button-hover-text-color: var(--bre-color-white);
--bre-button-hover-bg-color: var(--bre-color-#{$val});
--bre-button-hover-border-color: var(--bre-color-#{$val});
--bre-button-active-text-color: var(--bre-color-white);
--bre-button-disabled-text-color: var(--bre-color-#{$val}-light-5);
--bre-button-disabled-bg-color: var(--bre-color-#{$val}-light-9);
--bre-button-disabled-border-color: var(--bre-color-#{$val}-light-8);
}
}

.bre-button--large {
--bre-button-size: 40px;
height: var(--bre-button-size);
padding: 12px 19px;
font-size: var(--bre-font-size-base);
border-radius: var(--bre-border-radius-base);
/*circle*/
&.is-circle {
border-radius: 50%;
padding: 12px;
}
}

.bre-button--small {
--bre-button-size: 24px;
height: var(--bre-button-size);
padding: 5px 11px;
font-size: 12px;
border-radius: calc(var(--bre-border-radius-base) - 1px);
/*circle*/
&.is-circle {
border-radius: 50%;
padding: 5px;
}
[class*='bre-icon'] {
width: 12px;
height: 12px;
}
}

.bre-button-group {
display: inline-block;
vertical-align: middle;
&::after {
clear: both;
}
& > :deep(.bre-button) {
float: left;
position: relative;
margin-left: 0;
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: var(--bre-button-group-border-color);
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: var(--bre-button-group-border-color);
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
border-left-color: var(--bre-button-group-border-color);
border-right-color: var(--bre-button-group-border-color);
}
&:not(:last-child) {
margin-right: -1px;
}
&:first-child:last-child {
border-top-right-radius: var(--bre-border-radius-base);
border-bottom-right-radius: var(--bre-border-radius-base);
border-top-left-radius: var(--bre-border-radius-base);
border-bottom-left-radius: var(--bre-border-radius-base);
&.is-round {
border-radius: var(--bre-border-radius-round);
}
&.is-circle {
border-radius: 50%;
}
}
}
}
24 changes: 13 additions & 11 deletions packages/play/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@
</script>

<template>
<bre-button icon="plus" type="default" size="large">按钮</bre-button>
<bre-button icon="plus" type="success" size="small" plain>按钮</bre-button>
<bre-collapse>
<bre-collapse-item title="标题1">内容1</bre-collapse-item>
<bre-collapse-item title="标题2">内容2</bre-collapse-item>
</bre-collapse>
<div style="max-width: 600px">
<bre-alert type="success">Success alert</bre-alert>
<bre-alert type="info">Info alert</bre-alert>
<bre-alert type="warning">Warning alert</bre-alert>
<bre-alert type="danger">Error alert</bre-alert>
<div>
<h1>按钮组件</h1>
<bre-button size="large">按钮</bre-button>
<bre-button size="medium">按钮</bre-button>
<bre-button size="small">按钮</bre-button>

<bre-button type="primary" size="large">按钮</bre-button>
<bre-button type="primary" size="medium">按钮</bre-button>
<bre-button type="primary" size="small">按钮</bre-button>

<bre-button type="success" size="large">按钮</bre-button>
<bre-button type="success" size="large">按钮</bre-button>
<bre-button type="success" size="large">按钮</bre-button>
</div>
</template>

Expand Down
89 changes: 0 additions & 89 deletions packages/theme/reset.scss
View file
Original file line number Diff line number Diff line change
@@ -1,89 +0,0 @@
body {
font-family: var(--bre-font-family);
font-weight: 400;
font-size: var(--bre-font-size-base);
line-height: calc(var(--bre-font-size-base) * 1.2);
color: var(--bre-text-color-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}

a {
color: var(--bre-color-primary);
text-decoration: none;

&:hover,
&:focus {
color: var(--bre-color-primary-light-3);
}

&:active {
color: var(--bre-color-primary-dark-2);
}
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--bre-text-color-regular);
font-weight: inherit;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}
}

h1 {
font-size: calc(var(--bre-font-size-base) + 6px);
}

h2 {
font-size: calc(var(--bre-font-size-base) + 4px);
}

h3 {
font-size: calc(var(--bre-font-size-base) + 2px);
}

h4,
h5,
h6,
p {
font-size: inherit;
}

p {
line-height: 1.8;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}
}

sup,
sub {
font-size: calc(var(--bre-font-size-base) - 1px);
}

small {
font-size: calc(var(--bre-font-size-base) - 2px);
}

hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid var(--bre-border-color-lighter);
}
Loading

0 comments on commit ab21840

Please sign in to comment.