yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correct apperance symbols

Browse Source
This commit is contained in:
Niels Lyngsø
2023-06-07 20:18:18 +02:00
parent fdfea80298
commit c5c3c8f05e
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
View File

@@ -229,34 +229,32 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
}
#renderAlignLeftIcon() {
return html`<div
return html`<button
type="button"
@click=${this.#setAppearanceNormal}
@keydown=${() => ''}
class="appearance left ${this._returnData.appearance?.labelOnTop ? '' : 'selected'}">
<svg width="260" height="32" viewBox="0 0 260 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="89" height="14" rx="7" fill="currentColor" />
<rect x="121" width="139" height="10" rx="5" fill="currentColor" fill-opacity="0.4" />
<rect x="121" y="46" width="108" height="10" rx="5" fill="currentColor" fill-opacity="0.4" />
<rect x="121" y="23" width="139" height="10" rx="5" fill="currentColor" fill-opacity="0.4" />
<svg width="200" height="48" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="94" height="14" rx="6" fill="currentColor" />
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
<rect x="106" width="94" height="60" rx="5" fill="currentColor" fill-opacity="0.4" />
</svg>
<label class="appearance-label"> Label on the left </label>
</div>`;
</button>`;
}
#renderAlignTopIcon() {
return html`
<div
<button
type="button"
@click=${this.#setAppearanceTop}
@keydown=${() => ''}
class="appearance top ${this._returnData.appearance?.labelOnTop ? 'selected' : ''}">
<svg width="139" height="48" viewBox="0 0 139 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="89" height="14" rx="7" fill="currentColor" />
<rect y="30" width="139" height="10" rx="5" fill="currentColor" fill-opacity="0.4" />
<rect y="76" width="108" height="10" rx="5" fill="currentColor" fill-opacity="0.4" />
<rect y="53" width="139" height="10" rx="5" fill="currentColor" fill-opacity="0.4" />
<svg width="140" height="48" viewBox="0 0 140 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="90" height="14" rx="6" fill="currentColor" />
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
<rect y="42" width="140" height="36" rx="5" fill="currentColor" fill-opacity="0.4" />
</svg>
<label class="appearance-label"> Label on top </label>
</div>
</button>
`;
}
@@ -319,10 +317,11 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
.appearance {
position: relative;
display: flex;
border: 2px solid var(--uui-color-border-standalone);
border: 1px solid var(--uui-color-border-standalone);
background-color: transparent;
padding: var(--uui-size-space-4) var(--uui-size-space-5);
align-items: center;
border-radius: 6px;
border-radius: var(--uui-border-radius);
opacity: 0.8;
flex-direction: column;
justify-content: space-between;
@@ -331,6 +330,8 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
.appearance-label {
font-size: 0.8rem;
line-height: 1;
font-weight: bold;
pointer-events: none;
}
.appearance.left {
flex-grow: 1;
@@ -343,15 +344,13 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
width: 100%;
color: var(--uui-color-text);
}
.appearance.selected .appearance-label {
font-weight: bold;
}
.appearance:not(.selected):hover {
border-color: var(--uui-color-border-emphasis);
cursor: pointer;
opacity: 1;
}
.appearance.selected {
background-color: var(--uui-color-surface);
border-color: var(--uui-color-selected);
color: var(--uui-color-selected);
opacity: 1;