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

V13: Add more css custom properties to style the login screen (#15301)

Browse Source 
* add more css custom properties to control the login screen

* add override for text color

* add variables to control the font-size of the headline
This commit is contained in:
Jacob Overgaard
2023-11-28 08:37:59 +01:00
committed by GitHub
parent 7443dd2bdc
commit 8d76e32941
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Umbraco.Web.UI.Login/src/components/layouts/auth-layout.element.ts
View File

@@ -8,13 +8,21 @@ import { when } from 'lit/directives/when.js';
* @element umb-auth-layout
* @slot - The content of the layout
* @cssprop --umb-login-background - The background of the layout (default: #f4f4f4)
* @cssprop --umb-login-primary-color - The color of the headline (default: #283a97)
* @cssprop --umb-login-text-color - The color of the text (default: #000)
* @cssprop --umb-login-header-font-size - The font-size of the headline (default: 3rem)
* @cssprop --umb-login-header-font-size-large - The font-size of the headline on large screens (default: 4rem)
* @cssprop --umb-login-header-secondary-font-size - The font-size of the secondary headline (default: 2.4rem)
* @cssprop --umb-login-image - The background of the image wrapper (default: the value of the backgroundImage property)
* @cssprop --umb-login-image-display - The display of the image wrapper (default: flex)
* @cssprop --umb-login-image-border-radius - The border-radius of the image wrapper (default: 38px)
* @cssprop --umb-login-content-background - The background of the content wrapper (default: none)
* @cssprop --umb-login-content-display - The display of the content wrapper (default: flex)
* @cssprop --umb-login-content-width - The width of the content wrapper (default: 100%)
* @cssprop --umb-login-content-height - The height of the content wrapper (default: 100%)
* @cssprop --umb-login-content-border-radius - The border-radius of the content wrapper (default: 0)
* @cssprop --umb-login-align-items - The align-items of the main wrapper (default: unset)
* @cssprop --umb-login-button-border-radius - The border-radius of the buttons (default: 45px)
* @cssprop --umb-curves-color - The color of the curves (default: #f5c1bc)
* @cssprop --umb-curves-display - The display of the curves (default: inline)
*/
@@ -97,20 +105,21 @@ export class UmbAuthLayoutElement extends LitElement {
static styles: CSSResultGroup = [
css`
:host {
--uui-color-interactive: #283a97;
--uui-button-border-radius: 45px;
--uui-color-interactive: var(--umb-login-primary-color, #283a97);
--uui-button-border-radius: var(--umb-login-button-border-radius, 45px);
--uui-color-default: var(--uui-color-interactive);
--uui-button-height: 42px;
--uui-select-height: 38px;
--input-height: 40px;
--header-font-size: 3rem;
--header-secondary-font-size: 2.4rem;
--header-font-size: var(--umb-login-header-font-size, 3rem);
--header-secondary-font-size: var(--umb-login-header-secondary-font-size, 2.4rem);
--curves-color: var(--umb-curves-color, #f5c1bc);
--curves-display: var(--umb-curves-display, inline);
display: block;
background: var(--umb-login-background, #f4f4f4);
color: var(--umb-login-text-color, #000);
}
#main-no-image,
@@ -136,6 +145,7 @@ export class UmbAuthLayoutElement extends LitElement {
height: var(--umb-login-content-height, 100%);
box-sizing: border-box;
overflow: auto;
border-radius: var(--umb-login-content-border-radius, 0);
}
#content {
@@ -148,7 +158,7 @@ export class UmbAuthLayoutElement extends LitElement {
background: var(--umb-login-image, var(--image));
width: 100%;
height: 100%;
border-radius: 38px;
border-radius: var(--umb-login-image-border-radius, 38px);
position: relative;
overflow: hidden;
color: var(--curves-color);
@@ -181,7 +191,7 @@ export class UmbAuthLayoutElement extends LitElement {
@media only screen and (min-width: 900px) {
:host {
--header-font-size: 4rem;
--header-font-size: var(--umb-login-header-font-size-large, 4rem);
}
#main {