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

use css vars

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-10-19 17:55:27 +13:00
parent bc5e697639
commit b34cd8dd39
4 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
View File

@@ -114,8 +114,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
height: 100%;
position: relative;
user-select: none;
background-color: white;
outline: 1px solid lightgrey;
background-color: var(--uui-color-surface);
outline: 1px solid var(--uui-color-border);
}
/* Wrapper is used to make the focal point position responsive to the image size */
#wrapper {

16
src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-preview.element.ts
View File

@@ -161,10 +161,13 @@ export class UmbImageCropperPreviewElement extends LitElement {
:host {
display: flex;
flex-direction: column;
outline: 1px solid lightgrey;
padding: 12px;
border-radius: 4px;
background-color: white;
padding: var(--uui-size-space-4);
border-radius: var(--uui-border-radius);
background-color: var(--uui-color-surface);
cursor: pointer;
}
:host(:hover) {
background-color: var(--uui-color-surface-alt);
}
#container {
display: flex;
@@ -180,9 +183,10 @@ export class UmbImageCropperPreviewElement extends LitElement {
}
#alias {
font-weight: bold;
margin-top: 8px;
margin-top: var(--uui-size-space-3);
}
#dimensions {
#dimensions,
#user-defined {
font-size: 0.8em;
}
#image {

6
src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
View File

@@ -342,7 +342,7 @@ export class UmbImageCropperElement extends LitElement {
:host {
display: grid;
grid-template-rows: 1fr auto;
gap: 8px;
gap: var(--uui-size-space-3);
height: 100%;
width: 100%;
}
@@ -356,8 +356,8 @@ export class UmbImageCropperElement extends LitElement {
position: relative;
width: 100%;
height: 100%;
outline: 1px solid lightgrey;
border-radius: 4px;
outline: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
}
#mask {

4
src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
View File

@@ -127,7 +127,7 @@ export class UmbInputImageCropperElement extends LitElement {
display: flex;
width: 100%;
box-sizing: border-box;
gap: 8px;
gap: var(--uui-size-space-3);
height: 400px;
}
#main {
@@ -139,7 +139,7 @@ export class UmbInputImageCropperElement extends LitElement {
#side {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 8px;
gap: var(--uui-size-space-3);
flex-grow: 1;
overflow-y: auto;
height: fit-content;