Skip to content

Commit

Permalink
fix: triangle default style
Browse files Browse the repository at this point in the history
peterpeterparker committed Mar 25, 2023
1 parent 74da29e commit 9583b9f
Showing 3 changed files with 19 additions and 28 deletions.
9 changes: 4 additions & 5 deletions src/components/toolbars/triangle/readme.md
Original file line number Diff line number Diff line change
@@ -10,11 +10,10 @@

## CSS Custom Properties

| Name | Description |
| ------------------------------ | ----------------------------------------------------- |
| `--stylo-triangle-background` | The background-color of the triangle @default --white |
| `--stylo-triangle-drop-shadow` | drop-shaddow of the triangle @default 2 |
| `--stylo-triangle-width` | The width of the triangle @default 2 |
| Name | Description |
| ------------------------------ | --------------------------------------- |
| `--stylo-triangle-drop-shadow` | drop-shadow of the triangle |
| `--stylo-triangle-width` | The width of the triangle @default 22px |

## Dependencies

35 changes: 15 additions & 20 deletions src/components/toolbars/triangle/triangle.scss
Original file line number Diff line number Diff line change
@@ -1,40 +1,35 @@
@use "../../../themes/overlay";

:host(.top) {
div.triangle {
bottom: unset;
top: 0px;
top: 0;
transform: rotate(180deg) translate(50%, 100%);
}
}

div.triangle {
z-index: 1;

/**
* @prop --stylo-triangle-width: The width of the triangle
* @default 22px
*/
--triangle-width: var(--stylo-triangle-width, 22px);

position: absolute;
width: 0;
height: 0;
bottom: 0px;
left: max(var(--stylo-toolbar-triangle-start), calc(var(--stylo-triangle-width, 40px) / 2));
bottom: 0;
left: var(--stylo-toolbar-triangle-start);
transform: translate(-50%, 100%);

background: transparent;
/**
* @prop --stylo-triangle-width: The width of the triangle
* @default 2
*/
/**
* @prop --stylo-triangle-background: The background-color of the triangle
* @default --white
*/
border-left: calc(var(--stylo-triangle-width, 24px) / 2) solid transparent;
border-right: calc(var(--stylo-triangle-width, 24px) / 2) solid transparent;
border-top: calc(var(--stylo-triangle-width, 24px) / 2) solid
var(--stylo-triangle-background, --white);
transform: translate(-50%, 100%);

border-left: calc(var(--triangle-width) / 2) solid transparent;
border-right: calc(var(--triangle-width) / 2) solid transparent;
border-top: calc(var(--triangle-width) / 2) solid var(--stylo-background, var(--white));

/**
* @prop --stylo-triangle-drop-shadow: drop-shaddow of the triangle
* @default 2
* @prop --stylo-triangle-drop-shadow: drop-shadow of the triangle
*/
filter: drop-shadow(var(--stylo-triangle-drop-shadow));
}
3 changes: 0 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -69,9 +69,6 @@
--stylo-toolbar-button-color-active: var(--highlight);
--stylo-list-background-active: rgba(var(--highlight-rgb), 0.2);
--stylo-toolbar-border-radius: 0;

--stylo-triangle-background: var(--highlight-contrast);
--stylo-triangle-width: 22px;
--stylo-triangle-drop-shadow: 0px 1px 0px var(--highlight);
}

0 comments on commit 9583b9f

Please sign in to comment.