Skip to content

Commit

Permalink
fix(button): fixing the active hover and short size
Browse files Browse the repository at this point in the history
  • Loading branch information
WillianLomeu committed Nov 28, 2024
1 parent 34fb439 commit d94b293
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 65 deletions.
6 changes: 6 additions & 0 deletions src/components/button/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ $button-border-radius: 8px;
.typo_buttom,
.icon_buttom {
color: $text-color;
z-index: 1;
}

&--disabled {
Expand Down Expand Up @@ -157,6 +158,11 @@ $button-border-radius: 8px;
gap: 0;
}

&__only-icon--short {
padding: 8px;
gap: 0;
}

&--block,
&--group {
width: 100%;
Expand Down
3 changes: 3 additions & 0 deletions src/components/button/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,9 @@ export class Button {
if (slotText === '' && this.size === 'large') {
onlyIconElement.classList.add('button__only-icon--large');
}
if (slotText === '' && this.size === 'short') {
onlyIconElement.classList.add('button__only-icon--short');
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/grid/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
| `justifyContent` | `justify-content` | | `"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"` | `undefined` |
| `lg` | `lg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
| `lgOffset` | `lg-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
| `margin` | `margin` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
| `margin` | `margin` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
| `md` | `md` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
| `mdOffset` | `md-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
| `padding` | `padding` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
| `padding` | `padding` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` |
| `sm` | `sm` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
| `smOffset` | `sm-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
| `xg` | `xg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |
Expand Down
63 changes: 0 additions & 63 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,69 +24,6 @@

<body>
<bds-test-component></bds-test-component>
<h2>Exemplos do BdsDivider</h2>
<bds-grid direction="column" gap="2">
<bds-grid xxs="12" direction="column">
<!-- Horizontal Divider, Solid, Divider-1 -->
<bds-divider style-type="solid" orientation="horizontal" color="divider-1"></bds-divider>

<!-- Horizontal Divider, Solid, Divider-2 -->
<bds-divider style-type="solid" orientation="horizontal" color="divider-2"></bds-divider>

<!-- Horizontal Divider, Solid, Divider-3 -->
<bds-divider style-type="solid" orientation="horizontal" color="divider-3"></bds-divider>

<!-- Horizontal Divider, Dotted, Divider-1 -->
<bds-divider style-type="dotted" orientation="horizontal" color="divider-1"></bds-divider>

<!-- Horizontal Divider, Dotted, Divider-2 -->
<bds-divider style-type="dotted" orientation="horizontal" color="divider-2"></bds-divider>

<!-- Horizontal Divider, Dotted, Divider-3 -->
<bds-divider style-type="dotted" orientation="horizontal" color="divider-3"></bds-divider>

<!-- Horizontal Divider, Dashed, Divider-1 -->
<bds-divider style-type="dashed" orientation="horizontal" color="divider-1"></bds-divider>

<!-- Horizontal Divider, Dashed, Divider-2 -->
<bds-divider style-type="dashed" orientation="horizontal" color="divider-2"></bds-divider>

<!-- Horizontal Divider, Dashed, Divider-3 -->
<bds-divider style-type="dashed" orientation="horizontal" color="divider-3"></bds-divider>

</bds-grid>
<bds-grid direction="row" gap="2" height="600px">
<!-- Vertical Divider, Solid, Divider-1 -->
<bds-divider style-type="solid" orientation="vertical" color="divider-1"></bds-divider>

<!-- Vertical Divider, Solid, Divider-2 -->
<bds-divider style-type="solid" orientation="vertical" color="divider-2"></bds-divider>

<!-- Vertical Divider, Solid, Divider-3 -->
<bds-divider style-type="solid" orientation="vertical" color="divider-3"></bds-divider>

<!-- Vertical Divider, Dotted, Divider-1 -->
<bds-divider style-type="dotted" orientation="vertical" color="divider-1"></bds-divider>

<!-- Vertical Divider, Dotted, Divider-2 -->
<bds-divider style-type="dotted" orientation="vertical" color="divider-2"></bds-divider>

<!-- Vertical Divider, Dotted, Divider-3 -->
<bds-divider style-type="dotted" orientation="vertical" color="divider-3"></bds-divider>

<!-- Vertical Divider, Dashed, Divider-1 -->
<bds-divider style-type="dashed" orientation="vertical" color="divider-1"></bds-divider>

<!-- Vertical Divider, Dashed, Divider-2 -->
<bds-divider style-type="dashed" orientation="vertical" color="divider-2"></bds-divider>

<!-- Vertical Divider, Dashed, Divider-3 -->
<bds-divider style-type="dashed" orientation="vertical" color="divider-3"></bds-divider>

</bds-grid>

</bds-grid>

</body>

<script>
Expand Down

0 comments on commit d94b293

Please sign in to comment.