diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.html b/src/app/data-display/chip/chip-styling/chip-styling.component.html index 7f46d62b8d..7d388ed335 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.html +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.html @@ -1,23 +1,8 @@ - + @for (chip of chipList; track chip) { - - {{chip.icon}} + + {{chip.text}} } - - - check_circle - - - - delete - diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 02eda91f02..d6f8c34742 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -1,11 +1,48 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$custom-theme: chip-theme( - $background: #57a5cd, - $selected-background: #ecaa53, - $remove-icon-color: #d81414, - $border-radius: 5px, -); - -@include css-vars($custom-theme); +// CSS variables approach + +igx-chip { + --text-color: #fff; + --hover-text-color: #fff; + --focus-text-color: #fff; + --border-radius: #{rem(5px)}; +} + +.xcom { + --background: #000; + --hover-background: #000; + --focus-background: #323232; +} + +.youtube { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; +} + +.facebook { + --background: #3b5999; + --hover-background: #3b5999; + --focus-background: #2c4378; +} + +.linkedin { + --background: #55acee; + --hover-background: #55acee; + --focus-background: #4682af; +} + +// Sass theme approach + +// $custom-chip-theme: chip-theme( +// $background: #cd201f, +// $text-color: #fff, +// $hover-background: #cd201f, +// $focus-background: #9f1717, +// $border-radius: rem(5px) +// ); + +// @include css-vars($custom-chip-theme) + \ No newline at end of file diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index a50d6de308..20fbb999c6 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,52 +1,51 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular'; - +import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core'; +import { facebook, linkedin } from '@igniteui/material-icons-extended'; +import { + IgxChipsAreaComponent, + IgxChipComponent, + IgxIconComponent, + IgxPrefixDirective, + IgxIconService +} from 'igniteui-angular'; +import { NgClass } from '@angular/common'; @Component({ - selector: 'app-chip', - styleUrls: ['./chip-styling.component.scss'], - templateUrl: './chip-styling.component.html', - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] + selector: 'app-chip', + styleUrls: ['./chip-styling.component.scss'], + templateUrl: './chip-styling.component.html', + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass] }) -export class ChipStylingSampleComponent { - changeDetectionRef = inject(ChangeDetectorRef); - - public chipList = [ - { - text: 'Country', - id: '1', - icon: 'place' - }, - { - text: 'City', - id: '2', - icon: 'location_city' - }, - { - text: 'Town', - id: '3', - icon: 'store' - }, - { - text: 'First Name', - id: '4', - icon: 'person_pin' - } - ]; - - - public chipRemoved(event: IBaseChipEventArgs) { - this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); - this.changeDetectionRef.detectChanges(); - } +export class ChipStylingSampleComponent implements OnInit { + changeDetectionRef = inject(ChangeDetectorRef); + private iconService = inject(IgxIconService) + public ngOnInit() { + this.iconService.addSvgIconFromText('x', ''); + this.iconService.addSvgIconFromText('youtube', ' '); + this.iconService.addSvgIconFromText(facebook.name, facebook.value); + this.iconService.addSvgIconFromText(linkedin.name, linkedin.value); + } - public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { - const newChipList = []; - for (const chip of event.chipsArray) { - const chipItem = this.chipList.filter((item) => item.id === chip.id)[0]; - newChipList.push(chipItem); - } - this.chipList = newChipList; + public chipList = [ + { + text: 'X.com', + class: 'xcom', + icon: 'x' + }, + { + text: 'Youtube', + class: 'youtube', + icon: 'youtube' + }, + { + text: 'Facebook', + class: 'facebook', + icon: 'facebook' + }, + { + text: 'LinkedIn', + class: 'linkedin', + icon: 'linkedin' } + ]; } diff --git a/src/app/data-display/chip/chip-styling/layout.scss b/src/app/data-display/chip/chip-styling/layout.scss index 619dc177ee..f80fd2f1c4 100644 --- a/src/app/data-display/chip/chip-styling/layout.scss +++ b/src/app/data-display/chip/chip-styling/layout.scss @@ -1,4 +1,23 @@ +@use "igniteui-angular/theming" as *; + +:host { + ::ng-deep { + .igx-chip__item { + height: rem(20px); + font-size: rem(12px); + } + } +} + igx-chip { - margin-right: 5px; - margin-top: 20px; + margin-right: rem(8px); + margin-top: rem(20px); +} + +igx-chips-area { + margin-left: rem(20px); +} + +igx-icon { + --size: #{rem(12px)}; } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html index 349481f203..8eee79e1d3 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.html +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.html @@ -1,17 +1,22 @@ -
-
- +@for (item of range; let i = $index; track i) { +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
- -
-
- -
-
- -
-
- -
-
\ No newline at end of file +} \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss index c0b38ce1e9..bd11ce2997 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.scss @@ -1,25 +1,216 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; +@use "sass:map"; -$custom-contained-theme: contained-button-theme( - $background: #348ae0 -); +// CSS variables approach -$custom-flat-theme: flat-button-theme( - $foreground: var(--ig-error-800) +$list: ( + "sample-1": ( + "primary": #000, + "secondary": rgba(0, 0, 0, 0.75), + "active": rgba(0, 0, 0, 0.95), + "focus": #fff, + "hover": #4096ff, + "foreground": rgba(0, 0, 0, 0.88), + "border": #d9d9d9, + "active-foreground": #0958d9, + "flat-foreground": #69b1ff, + "flat-background": rgba(0, 0, 0, 0.04), + "flat-active": rgba(0, 0, 0, 0.15), + "flat-hover": rgba(0, 0, 0, 0.06), + ), + "sample-2": ( + "primary": #1677ff, + "secondary": #4096ff, + "active": #0958d9, + "focus": #fff, + "flat-background": #e6f4ff, + "flat-hover": #bae0ff, + "flat-active": #91caff, + ), + "sample-3": ( + "primary": #ff4d4f, + "secondary": #ff7875, + "active": #d9363e, + "focus": #fff, + "flat-background": #fff2f0, + "flat-hover": #ffdfdc, + "flat-active": #ffccc7, + ), + "sample-4": ( + "primary": #eb2f96, + "secondary": #f759ab, + "active": #c41d7f, + "focus": #fff, + "flat-background": #fff0f6, + "flat-hover": #ffd6e7, + "flat-active": #ffadd2, + ), + "sample-5": ( + "primary": #722ed1, + "secondary": #9254de, + "active": #531dab, + "focus": #fff, + "flat-background": #f9f0ff, + "flat-hover": #efdbff, + "flat-active": #d3adf7, + ), + "sample-6": ( + "primary": #13c2c2, + "secondary": #36cfc9, + "active": #08979c, + "focus": #fff, + "flat-background": #e6fffb, + "flat-hover": #b5f5ec, + "flat-active": #b5f5ec, + ), ); -$custom-outlined-theme: outlined-button-theme( - $foreground: var(--ig-success-500) -); +@each $variant, $style in $list { + .buttons-#{$variant} [igxbutton="contained"] { + --background: #{map-get($style, "primary")}; + --hover-background: #{map-get($style, "secondary")}; + --active-background: #{map-get($style, "active")}; + --focus-visible-background: #{map-get($style, "primary")}; + --focus-visible-foreground: #{map-get($style, "focus")}; + --focus-hover-background: #{map-get($style, "secondary")}; + --focus-hover-foreground: #{map-get($style, "focus")}; + --focus-background: #{map-get($style, "active")}; + } -$custom-fab-theme: fab-button-theme( - $background: #ffc506 -); + @if $variant == "sample-1" { + .buttons-#{$variant} [igxbutton="outlined"] { + --foreground: #{map-get($style, "foreground")}; + --border-color: #{map-get($style, "border")}; + --hover-foreground: #{map-get($style, "hover")}; + --hover-border-color: #{map-get($style, "hover")}; + --active-foreground: #{map-get($style, "active-foreground")}; + --active-border-color: #{map-get($style, "active-foreground")}; + --focus-hover-background: #{map-get($style, "focus")}; + --focus-hover-foreground: #{map-get($style, "hover")}; + --focus-background: #{map-get($style, "focus")}; + --focus-foreground: #{map-get($style, "active-foreground")}; + --focus-visible-border-color: #{map-get($style, "border")}; + } + + .buttons-#{$variant} [igxbutton="flat"] { + --foreground: #{map-get($style, "foreground")}; + --active-foreground: #{map-get($style, "foreground")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"] { + --background: #{map-get($style, "flat-background")}; + --hover-background: #{map-get($style, "flat-hover")}; + --focus-visible-background: #{map-get($style, "flat-background")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"], + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "foreground")}; + --focus-hover-background: #{map-get($style, "flat-hover")}; + --focus-background: #{map-get($style, "flat-active")}; + --focus-foreground: #{map-get($style, "foreground")}; + --focus-hover-foreground: #{map-get($style, "foreground")}; + --active-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-background: #{map-get($style, "flat-background")}; + } + + .buttons-#{$variant} .link [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "flat-foreground")}; + --active-foreground: #{map-get($style, "active-foreground")}; + } + } + + @else { + .buttons-#{$variant} [igxbutton="outlined"] { + --foreground: #{map-get($style, "primary")}; + --border-color: #{map-get($style, "primary")}; + --hover-foreground: #{map-get($style, "secondary")}; + --hover-border-color: #{map-get($style, "secondary")}; + --active-foreground: #{map-get($style, "active")}; + --active-border-color: #{map-get($style, "active")}; + --focus-hover-background: #{map-get($style, "focus")}; + --focus-hover-foreground: #{map-get($style, "secondary")}; + --focus-background: #{map-get($style, "focus")}; + --focus-foreground: #{map-get($style, "active")}; + --focus-visible-border-color: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"] { + --background: #{map-get($style, "flat-background")}; + --hover-background: #{map-get($style, "flat-hover")}; + --hover-foreground: #{map-get($style, "primary")}; + --active-foreground: #{map-get($style, "primary")}; + --focus-visible-background: #{map-get($style, "flat-background")}; + --focus-hover-foreground: #{map-get($style, "primary")}; + --focus-foreground: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"], + .buttons-#{$variant} .text [igxbutton="flat"] { + --active-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"], + .buttons-#{$variant} .link [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "secondary")}; + --active-foreground: #{map-get($style, "active")}; + --focus-hover-foreground: #{map-get($style, "secondary")}; + --focus-foreground: #{map-get($style, "active")}; + } + + .buttons-#{$variant} [igxbutton="flat"] { + --foreground: #{map-get($style, "primary")}; + --focus-hover-background: #{map-get($style, "flat-hover")}; + --focus-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-background: #{map-get($style, "flat-background")}; + } + } + + .buttons-#{$variant} [igxbutton="flat"], + .buttons-#{$variant} [igxbutton="outlined"] { + --focus-visible-foreground: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} [igxbutton="outlined"], + .buttons-#{$variant} .text [igxbutton="flat"], + .buttons-#{$variant} .link [igxbutton="flat"] { + --focus-visible-background: transparent; + } +} + +.button-sample [igxbutton="contained"] { + --foreground: #fff; + --hover-foreground: #fff; + --active-foreground: #fff; +} + +.button-sample [igxbutton="outlined"] { + --background: transparent; + --hover-background: transparent; + --active-background: transparent; +} + +// Sass theme approach + +// $custom-button-theme: button-theme( +// $background: #f9f0ff, +// $foreground: #722ed1, +// $border-color: #722ed1, +// $hover-background: #efdbff, +// $hover-foreground: #9254de, +// $hover-border-color: #9254de, +// $active-border-color: #531dab, +// $active-foreground: #531dab, +// $focus-visible-background: #f9f0ff, +// ); -.button-sample { - @include css-vars($custom-contained-theme); - @include css-vars($custom-flat-theme); - @include css-vars($custom-outlined-theme); - @include css-vars($custom-fab-theme); -}; \ No newline at end of file +// .button-sample { +// @include css-vars($custom-button-theme) +// } \ No newline at end of file diff --git a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts index a0380ea08c..657abb2a96 100644 --- a/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts +++ b/src/app/data-entries/buttons/buttons-style/buttons-style.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; -import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; +import { IgxButtonDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ selector: 'app-buttons-style', styleUrls: ['./buttons-style.component.scss'], templateUrl: './buttons-style.component.html', - imports: [IgxButtonDirective, IgxRippleDirective] + imports: [IgxButtonDirective], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}] }) -export class ButtonsStyleComponent { } +export class ButtonsStyleComponent { + range = Array(6); +} diff --git a/src/app/data-entries/buttons/buttons-style/layout.scss b/src/app/data-entries/buttons/buttons-style/layout.scss index 36396d2d00..43cf337fa2 100644 --- a/src/app/data-entries/buttons/buttons-style/layout.scss +++ b/src/app/data-entries/buttons/buttons-style/layout.scss @@ -1,9 +1,47 @@ -.buttons-sample { - display: flex; - margin: 8px; +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/button/button-component" as button; +@use 'sass:map'; + +:host { + ::ng-deep { + @include button($flat: flat-button-theme($schema: $light-bootstrap-schema), + $contained: contained-button-theme($schema: $light-bootstrap-schema), + $outlined: outlined-button-theme($schema: $light-bootstrap-schema), + $fab: fab-button-theme($schema: $light-bootstrap-schema)); + @include button.component(); + } +} + +[class^=buttons-sample] { + display: flex; + margin: 1rem rem(8px) rem(8px) 1rem; } .button-sample { - display: flex; - margin-right: 16px; + margin-right: 1rem; +} + +.dashed button{ + border-style: dashed; +} + +[class^="buttons-sample"]:hover .link button { + background: none; +} + +[igxbutton] { + --ig-button-font-weight: 400; + --ig-button-text-transform: capitalize; + min-height: rem(24px); + outline: rem(1px) solid #fff; +} + +.button-sample button { + --ig-size: var(--ig-size-medium); + padding: 0px rem(7px); + min-width: unset; +} + +.button-sample .igx-button { + --ig-font-family: 'alibaba-sans', sans-serif; } \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html index 1e959d579a..5d1a2f56c9 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html @@ -1,3 +1,3 @@ - - Styled checkbox - + + Styled checkbox + \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index c5b8a77146..d5b54306a9 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,10 +1,34 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$custom-checkbox-theme: checkbox-theme( - $empty-color: #ecaa53, - $fill-color: #ecaa53, - $border-radius: 5px -); +// CSS variables approach -@include css-vars($custom-checkbox-theme); +igx-checkbox { + --tick-color: #0064d9; + --tick-color-hover: #e3f0ff; + --fill-color: transparent; + --fill-color-hover: #e3f0ff; + --label-color: #131e29; + --focus-outline-color: #0032a5; + --border-radius: #{rem(4px)}; +} + +igx-checkbox:hover { + --empty-fill-color: #e3f0ff; +} + +// Sass theme approach + +// $custom-checkbox-theme: checkbox-theme( +// $tick-color: #0064d9, +// $tick-color-hover: #e3f0ff, +// $fill-color: transparent, +// $fill-color-hover: #e3f0ff, +// $label-color: #131e29, +// $focus-outline-color: #0032a5, +// $empty-color: #131e29, +// $border-radius: rem(4px), +// ); + +// @include css-vars($custom-checkbox-theme) + \ No newline at end of file diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts index 3bd791043a..3f45dcb2b8 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; -import { IgxCheckboxComponent } from 'igniteui-angular'; +import { IgxCheckboxComponent, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ - selector: 'app-checkbox-styling', - styleUrls: ['./checkbox-styling.component.scss'], - templateUrl: './checkbox-styling.component.html', - imports: [IgxCheckboxComponent] + selector: 'app-checkbox-styling', + styleUrls: ['./checkbox-styling.component.scss'], + templateUrl: './checkbox-styling.component.html', + providers: [{ provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent') }], + imports: [IgxCheckboxComponent] }) -export class CheckboxStylingComponent { } +export class CheckboxStylingComponent { +} diff --git a/src/app/data-entries/checkbox/checkbox-styling/layout.scss b/src/app/data-entries/checkbox/checkbox-styling/layout.scss index 7f3591cc5a..bbc3701553 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/layout.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/layout.scss @@ -1,4 +1,44 @@ +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/checkbox/checkbox-component" as checkbox; +@use "sass:map"; + +:host { + ::ng-deep { + $_checkbox-schema: map.get($light-fluent-schema, checkbox); + @include checkbox(checkbox-theme($schema: $_checkbox-schema)); + @include checkbox.component(); + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + + .igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite { + border-color: var(--empty-color); + } + + .igx-checkbox__composite { + min-width: rem(18px); + height: rem(18px); + } + + .igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite { + border-color: var(--empty-color); + } + + .igx-checkbox__label { + margin-inline-start: auto; + } + } +} + igx-checkbox { + --ig-font-family: Arial, Helvetica, sans-serif; + --ig-subtitle-1-font-size: #{rem(14px)}; + display: flex; - padding: 16px; -} \ No newline at end of file + margin: rem(18px) 0 0 rem(18px); +} + +#checkbox-1.igx-checkbox--focused:after { + inset: rem(8px) rem(-4px) rem(8px) rem(8px); + border-radius: rem(8px); +} diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html index 85d8543382..d9fdfb886f 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html @@ -1,21 +1,7 @@
- - +359 - - - - phone - - Ex.: +359 888 123 456 + + + + Helper text - - - +359 - - - - phone - - Ex.: +359 888 123 456 - -
+ \ No newline at end of file diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss index cf5356ec80..39ee2fd71d 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss @@ -1,19 +1,35 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -.sample-column { - gap: 1rem; +// CSS variables approach + +igx-input-group { + --border-color: #0f62fe; + --size: #{rem(40px)}; + --idle-bottom-line-color: #8d8d8d; + --hover-bottom-line-color: #8d8d8d; + --hover-placeholder-color: var(--ig-gray-600); + --idle-secondary-color: var(--ig-gray-600); + --focused-secondary-color: var(--ig-gray-700); + --focused-bottom-line-color: #8d8d8d; + --box-background-hover: var(--ig-gray-100); + --helper-text-color: var(--ig-gray-600); } -$custom-input-group: input-group-theme( - $border-color: #57a5cd, - $filled-text-color: #288a54, - $focused-text-color: #174f30, - $idle-text-color: #288a54, - $idle-bottom-line-color: #288a54, - $hover-bottom-line-color: #288a54, - $focused-secondary-color: #174f30, - $box-background: #57a5cd -); +// Sass theme approach + +// $custom-input-group: input-group-theme( +// $border-color: #0f62fe, +// $idle-bottom-line-color: #8d8d8d, +// $hover-bottom-line-color: #8d8d8d, +// $hover-placeholder-color: var(--ig-gray-600), +// $idle-secondary-color: var(--ig-gray-600), +// $focused-secondary-color: var(--ig-gray-700), +// $size: rem(40px), +// $box-border-radius: 0, +// $box-background-hover: var(--ig-gray-100), +// $placeholder-color: var(--ig-gray-600), +// $helper-text-color: var(--ig-gray-600) +// ); -@include css-vars($custom-input-group); +// @include css-vars($custom-input-group); \ No newline at end of file diff --git a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts index e0d175f820..e98bc90dd6 100644 --- a/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts +++ b/src/app/data-entries/input-group/input-group-styling/input-group-styling.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -import { IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective } from 'igniteui-angular'; +import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; @Component({ selector: 'app-input-group-style', templateUrl: 'input-group-styling.component.html', styleUrls: ['input-group-styling.component.scss'], - imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] + imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('indigo')}] }) export class InputGroupStyleComponent { } diff --git a/src/app/data-entries/input-group/input-group-styling/layout.scss b/src/app/data-entries/input-group/input-group-styling/layout.scss index fc4259acbb..74026e1dc1 100644 --- a/src/app/data-entries/input-group/input-group-styling/layout.scss +++ b/src/app/data-entries/input-group/input-group-styling/layout.scss @@ -1,3 +1,53 @@ -.sample-column { - max-width: 550px; +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/input/input-group-component" as input; +@use "sass:map"; + +:host { + ::ng-deep { + $_input-schema: map.get($light-indigo-schema, input-group); + @include input-group(input-group-theme($schema: $_input-schema)); + @include input.component(); + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the Carbon sample. + + .igx-input-group__bundle { + background: var(--box-background-hover); + + [igxinput].igx-input-group__input { + letter-spacing: rem(0.16px); + padding-block: 0; + padding-inline: rem(12px); + font-size: rem(14px); + } + + input::placeholder { + font-size: rem(14px); + font-style: normal; + opacity: 0.7; + font-weight: 300; + font-family: "IBM Plex Sans", sans-serif; + } + } + + .igx-input-group--focused .igx-input-group__bundle::after { + border-block-end: 0; + inset: 0; + pointer-events: none; + box-shadow: inset 0 0 0 rem(2px) var(--border-color); + } + + .igx-input-group__label, igx-hint { + font-weight: 300; + } + } +} + +igx-input-group { + --ig-font-family: "IBM Plex Sans", sans-serif; } + +.sample-column { + max-width: rem(300px); + margin-top: rem(24px); +} \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index a275b1e4e2..2eecc4035e 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -1,9 +1,53 @@ +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/radio/radio-component" as radio; +@use "sass:map"; + +:host { + ::ng-deep{ + $_radio-schema: map.get($light-fluent-schema, radio); + @include radio(radio-theme($schema: $_radio-schema)); + @include radio.component(); + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + + .igx-radio--checked .igx-radio__composite::after { + --fill-color: #556b81; + } + + .igx-radio__composite::after, + .igx-radio__composite::before, + .igx-radio__composite { + width: rem(18px); + height: rem(18px); + } + + .igx-radio__composite { + min-width: rem(18px); + } + + .igx-radio__ripple { + display: none; + } + } +} + igx-radio + igx-radio { - margin-top: 16px; + margin-top: 1rem; +} + +igx-radio { + --ig-subtitle-1-font-size: #{rem(14px)}; + --ig-font-family: Arial,Helvetica,sans-serif; } .radio-wrapper { - display: flex; - flex-flow: column nowrap; - padding: 16px; + display: flex; + flex-flow: column nowrap; + padding: 1rem; +} + +.igx-radio--focused::after { + inset: rem(1px) rem(-4px) rem(1px) rem(-2px); + border-radius: rem(8px); } \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html index be0ba57fc4..3ad4431519 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html @@ -3,5 +3,5 @@ London Sofia Tokyo - Singapore -
+ Singapore + \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss index c2c3383809..93e3f63db7 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss @@ -1,9 +1,30 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$custom-radio-theme: radio-theme( - $empty-color: #345779, - $fill-color: #2dabe8, -); +// CSS variables approach -@include css-vars($custom-radio-theme); +igx-radio { + --empty-color: #556b81; + --label-color: #131e29; + --fill-color: #0064d9; + --focus-outline-color: #0032a5; +} + +igx-radio:hover { + --empty-fill-color: #e3f0ff; + --empty-color: #0064d9; + --hover-color: transparent; +} + +// Sass theme approach + +// $custom-radio-theme: radio-theme( +// $empty-color: #556b81, +// $label-color: #131e29, +// $fill-color: #0064d9, +// $focus-outline-color: #0032a5, +// $fill-color-hover: #0064d9, +// $hover-color: transparent +// ); + +// @include css-vars($custom-radio-theme); diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts index 9881fad3fb..8972a6018b 100644 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts +++ b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts @@ -3,11 +3,11 @@ import { IgxRadioComponent } from 'igniteui-angular'; import { FormsModule } from '@angular/forms'; @Component({ - selector: 'app-radio-sample-1', - styleUrls: ['./radio-styling-sample.component.scss'], - templateUrl: './radio-styling-sample.component.html', - imports: [IgxRadioComponent, FormsModule] + selector: 'app-radio-sample-1', + styleUrls: ['./radio-styling-sample.component.scss'], + templateUrl: './radio-styling-sample.component.html', + imports: [IgxRadioComponent, FormsModule] }) export class RadioStylingSampleComponent { - public selected: string; + public selected: string; } diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index dfc9dd1daf..8e3206d3fe 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -1,9 +1,56 @@ +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/components/switch/switch-component" as switch; +@use 'sass:map'; + +:host { + ::ng-deep { + $_switch-schema: map.get($light-fluent-schema, switch); + @include switch(switch-theme($schema: $_switch-schema)); + @include switch.component(); + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + + igx-switch:hover .igx-switch__thumb { + --border-hover-color: #fff; + } + + .igx-switch__composite { + width: rem(44px); + height: rem(20px); + padding-left: rem(2px); + } + + .igx-switch__composite-thumb { + width: rem(25px); + height: 1rem; + min-width: rem(25px); + transform: translateX(-0.5px); + } + + .igx-switch__thumb { + width: rem(25px); + height: 1rem; + min-width: rem(25px); + } + + .igx-switch--checked .igx-switch__composite .igx-switch__composite-thumb { + transform: translateX(0.85rem); + } + + .igx-switch--focused .igx-switch__composite::after { + border-radius: 1rem; + } + } +} + igx-switch { - margin-top: 24px; + margin-top: rem(24px); + width: max-content; } .switch-wrapper { - display: flex; - flex-flow: column nowrap; - padding: 16px; + display: flex; + flex-flow: column nowrap; + padding: 2rem; } \ No newline at end of file diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index e85a3e4c51..16bff6ad2f 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,9 +1,41 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$custom-switch-theme: switch-theme( - $thumb-off-color: #7cadd5, - $thumb-on-color: #ecaa53, -); +// CSS variables approach -@include css-vars($custom-switch-theme); +igx-switch { + --thumb-on-color: #e3f0ff; + --thumb-off-color: #fff; + --track-on-color: #0064d9; + --track-off-color: #788fa6; + --track-on-hover-color: #0058bf; + --border-radius-track: 1rem; + --focus-outline-color: #0032a5; + --border-on-color: transparent; + --border-color: transparent; + --border-on-hover-color: transparent; + --border-hover-color: transparent; +} + +igx-switch:hover { + --track-off-color: #637d97; +} + +// Sass theme approach + +// $custom-switch-theme: switch-theme( +// $thumb-on-color: #e3f0ff, +// $track-on-color: #0064d9, +// $track-on-hover-color: #0058bf, +// $thumb-off-color: #fff, +// $track-off-color: #788fa6, +// $border-radius-track: 1rem, +// $focus-outline-color: #0032a5, +// $border-on-color: transparent, +// $border-on-hover-color: transparent, +// $border-color: transparent, +// $border-hover-color: transparent, +// ); + +// @include css-vars($custom-switch-theme) + \ No newline at end of file diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts index b6d5f3dece..16d3ee69a2 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.ts +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.ts @@ -1,17 +1,16 @@ import { Component } from '@angular/core'; - import { IgxSwitchComponent } from 'igniteui-angular'; @Component({ - selector: 'app-switch-styling', - styleUrls: ['./switch-styling.component.scss'], - templateUrl: './switch-styling.component.html', - imports: [IgxSwitchComponent] + selector: 'app-switch-styling', + styleUrls: ['./switch-styling.component.scss'], + templateUrl: './switch-styling.component.html', + imports: [IgxSwitchComponent] }) export class SwitchStylingComponent { public settings = [ - { name: 'WiFi', state: false}, - { name: 'Bluetooth', state: true}, - { name: 'Device visibility', state: false} + { name: 'WiFi', state: false }, + { name: 'Bluetooth', state: true }, + { name: 'Device visibility', state: false } ]; } diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html index 49e1dae43b..98dee27aa5 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html @@ -1,28 +1,32 @@
- + - - -

{{ card.title }}

-
{{ card.subtitle }}
- - - -

{{ card.content }}

- - - - @for (icon of card.icons; track icon) { - - } - - +
+ + +
+
{{ card.title }}
+

{{ card.subtitle }}

+
+ + + #artic + #fox + #card + + + + @for (icon of card.icons; track icon; let i = $index) { + + @if (i < 2) { + + } + } + +
-
+ \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss index ceb14c46ba..fff5af5c9c 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss @@ -1,9 +1,77 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$colorful-card: card-theme( - $background: #011627, - $subtitle-text-color: #ecaa53, -); +// CSS variables approach -@include css-vars($colorful-card); +igx-card { + --border-radius: #{rem(8px)}; + --outline-color: #f0f0f0; + --resting-shadow: none; + --hover-shadow: none; + --header-text-color: rgba(0, 0, 0, 0.88); +} + +igx-avatar { + --background: transparent; + --size: #{rem(30px)}; +} + +igx-chip { + --border-radius: #{rem(4px)}; + --background: #fafafa; + --border-color: #d9d9d9; + --hover-background: #d9d9d9; + --focus-background: #d9d9d9; +} + +.igx-icon-button--flat { + --foreground: #00000073; + --hover-foreground: #1677ff; + --hover-background: none; +} + +igx-divider { + --color: #f0f0f0 +} + +// Sass theme approach + +// $custom-card-theme: card-theme( +// $border-radius: rem(8px), +// $outline-color: #f0f0f0, +// $resting-shadow: none, +// $hover-shadow: none, +// $header-text-color: #000000e0, +// ); + +// $custom-avatar-theme: avatar-theme( +// $background: transparent, +// $size: rem(30px) +// ); + +// $custom-chip-theme: chip-theme( +// $border-radius: rem(4px), +// $background: #fafafa, +// $border-color: #d9d9d9, +// $hover-background: #d9d9d9, +// $focus-background: #d9d9d9, +// ); + +// $custom-icon-button-theme: icon-button-theme( +// $foreground: #00000073, +// $hover-foreground: #1677ff, +// $hover-background: none, +// $border-color: transparent +// ); + +// $custom-divider-theme: divider-theme( +// $color: #f0f0f0 +// ); + +// @include css-vars($custom-card-theme); +// @include css-vars($custom-avatar-theme); +// @include css-vars($custom-chip-theme); +// @include css-vars($custom-divider-theme); +// .igx-icon-button--flat { +// @include css-vars($custom-icon-button-theme); +// }; \ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts index 935be0448f..1ec78186c3 100644 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts @@ -1,25 +1,40 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; import { Card } from '../card.blueprint'; -import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular'; - +import { + IgxCardComponent, + IgxCardMediaDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardHeaderSubtitleDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxIconButtonDirective, + IgxIconComponent, + IgxAvatarComponent, + IgxDividerModule, + IgxIconService, + IgxChipComponent +} from 'igniteui-angular'; @Component({ - selector: 'app-card-styling-sample', - templateUrl: './card-styling-sample.component.html', - styleUrls: ['./card-styling-sample.component.scss'], - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + selector: 'app-card-styling-sample', + templateUrl: './card-styling-sample.component.html', + styleUrls: ['./card-styling-sample.component.scss'], + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, + IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, + IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] }) -export class CardStylingSampleComponent { - public card = new Card({ - content: `Hi! I'm Jane, photographer and filmmaker. - Photography is a way of feeling, of touching, - of loving. What you have caught on film is captured forever... - it remembers little things, long after you have - forgotten everything.`, - icons: ['person', 'favorite', 'share'], - imageUrl: 'https://images.unsplash.com/' - + 'photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80', - subtitle: 'Professional Photographer', - title: 'Jane Doe' - }); +export class CardStylingSampleComponent implements OnInit { + private iconService = inject(IgxIconService) + public ngOnInit() { + this.iconService.addSvgIconFromText('settings-custom', '') + this.iconService.addSvgIconFromText('edit-custom', ''); + this.iconService.addSvgIconFromText('dots', ''); + }; + public card = new Card({ + icons: ['settings-custom', 'edit-custom', 'dots'], + subtitle: 'This is the description', + title: 'Card title' + }); } diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss index d8f5f95f82..c56ee6fee1 100644 --- a/src/app/layouts/card/card-styling-sample/layout.scss +++ b/src/app/layouts/card/card-styling-sample/layout.scss @@ -1,4 +1,79 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} \ No newline at end of file +@use "igniteui-angular/theming" as *; + +:host { + ::ng-deep { + .igx-chip__item { + padding: 0 rem(5px); + height: rem(22px); + } + } +} + +.igx-card { + --ig-font-family: 'alibaba-sans', sans-serif; + + width: rem(300px); + border: none; +} + +.border { + border: rem(1px) solid var(--outline-color); + border-bottom-right-radius: rem(8px); + border-bottom-left-radius: rem(8px); + border-top: none; +} + +.igx-card-header{ + --ig-h6-font-size: 1rem; + --ig-body-1-font-size: #{rem(14px)}; + + width: unset; + padding: unset; + align-items: baseline; + margin: rem(24px) rem(24px) 0 rem(24px); + height: rem(65px); +} + +.igx-card-header__subtitle { + --ig-subtitle-2-font-weight: 400; + --ig-subtitle-2-line-height: #{rem(22px)}; + --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; + --subtitle-text-color: rgba(0, 0, 0, 0.45); + + margin: rem(8px) 0 rem(12px); +} + +.igx-card-content { + padding: 0; + + igx-chip { + --ig-body-2-font-size: #{rem(12px)}; + + padding: rem(5px); + + &:nth-of-type(1) { + margin-left: rem(5px); + } + } + + igx-divider { + margin-top: rem(5px); + } +} + +igx-icon { + --igx-icon-size: #{rem(14px)}; +} + +igx-avatar { + border-radius: rem(20px); +} + +igx-card-actions { + justify-content: space-evenly; + padding: rem(6px) 0; + + igx-divider { + height: rem(24px); + } +} diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html index 4a71009af8..afc5c45d12 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html @@ -1,4 +1,4 @@
- -
- + + \ No newline at end of file diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss index 7a54891f9c..8768f9008f 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss @@ -1,9 +1,170 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$custom-calendar-theme: calendar-theme( - $header-background: #ecaa53, - $content-background: #011627, -); +// CSS variables approach -@include css-vars($custom-calendar-theme); +:host { + ::ng-deep { + .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { + --date-hover-background: var(--background-hover); + --date-selected-foreground: var(--primary); + --date-selected-background: #FFF; + --date-selected-border-color: var(--primary); + --date-selected-focus-foreground: var(--primary); + --date-selected-focus-background: var(--background-hover); + --date-selected-focus-border-color: var(--primary); + --date-selected-hover-foreground: var(--primary); + --date-selected-hover-background: var(--background-hover); + --date-selected-hover-border-color: var(--primary); + --date-selected-current-hover-background: var(--background-hover); + --date-selected-current-focus-background: var(--background-hover); + --date-selected-current-background: #FFF; + --date-selected-current-border-color: var(--primary); + --date-selected-current-hover-border-color: var(--primary); + --date-current-hover-background: var(--background-hover); + } + } +} + +igx-calendar { + --date-focus-background: transparent; + --week-number-background: transparent; + --weekend-color: #131E29; + --weekday-color: #556B82; + --week-number-foreground: #556B82; + --inactive-color: #556B82; + --date-current-border-color: var(--current-border); + --date-current-hover-border-color: var(--current-border); + --date-current-focus-border-color: var(--current-border); + --date-current-hover-background: var(--background-weekend); + --date-selected-current-border-color: var(--current-border); + --date-selected-current-background: #FFF; + --date-selected-current-foreground: var(--primary); + --date-selected-current-focus-border-color: var(--current-border); + --date-selected-current-focus-background: var(--background-weekend); + --date-selected-current-focus-foreground: var(--primary); + --date-selected-current-hover-border-color: var(--current-border); + --date-selected-current-hover-background: var(--background-weekend); + --date-selected-current-hover-foreground: var(--primary); + --date-selected-foreground: var(--primary); + --date-selected-background: #FFF; + --date-selected-border-color: var(--primary); + --date-selected-hover-foreground: var(--primary); + --date-selected-hover-background: var(--background-weekend); + --date-selected-hover-border-color: var(--primary); + --date-selected-focus-foreground: var(--primary); + --date-selected-focus-background: var(--background-weekend); + --date-selected-focus-border-color: var(--primary); + --picker-foreground: var(--primary); + --picker-hover-foreground: var(--primary); + --picker-focus-foreground: var(--primary); + --ym-hover-background: var(--background); + --ym-selected-background: #EDF5FF; + --ym-selected-hover-background: #D9EAFF; + --ym-selected-hover-foreground: var(--primary); + --ym-selected-outline-color: var(--primary); + --ym-selected-hover-outline-color: var(--primary); + --ym-selected-focus-outline-color: var(--primary); + --ym-selected-focus-background: #D9EAFF; + --ym-current-foreground: var(--primary); + --ym-current-background: transparent; + --ym-current-outline-color: transparent; + --ym-current-hover-foreground: var(--primary); + --ym-current-hover-background: var(--background); + --ym-current-outline-hover-color: var(--primary); + --ym-selected-current-foreground: var(--primary); + --ym-selected-current-background: #EDF5FF; + --ym-selected-current-outline-color: var(--primary); + --ym-selected-current-hover-foreground: var(--primary); + --ym-selected-current-hover-background: #D9EAFF; + --ym-selected-current-outline-hover-color: var(--primary); + --ym-selected-current-outline-focus-color: var(--primary); +} + +// Sass theme approach + +// $custom-calendar-theme-weekend: calendar-theme( +// $date-hover-background: var(--background-hover), +// $date-selected-foreground: var(--primary), +// $date-selected-background: #FFF, +// $date-selected-border-color: var(--primary), +// $date-selected-focus-foreground: var(--primary), +// $date-selected-focus-background: var(--background-hover), +// $date-selected-focus-border-color: var(--primary), +// $date-selected-hover-foreground: var(--primary), +// $date-selected-hover-background: var(--background-hover), +// $date-selected-hover-border-color: var(--primary), +// $date-selected-current-hover-background: var(--background-hover), +// $date-selected-current-focus-background: var(--background-hover), +// $date-selected-current-background: #FFF, +// $date-selected-current-border-color: var(--primary), +// $date-selected-current-hover-border-color: var(--primary), +// $date-current-hover-background: var(--background-hover) +// ); + +// $custom-calendar-theme: calendar-theme( +// $date-focus-background: transparent, +// $picker-foreground: var(--primary), +// $picker-hover-foreground: var(--primary), +// $picker-focus-foreground: var(--primary), +// $weekday-color: #556B82, +// $weekend-color: #131E29, +// $inactive-color: #556B82, +// $week-number-foreground: #556B82, +// $week-number-background: transparent, +// $ym-selected-current-hover-foreground: var(--primary), +// $ym-selected-current-hover-background: #D9EAFF, +// $ym-hover-background: var(--background), +// $ym-current-foreground: var(--primary), +// $ym-current-background: transparent, +// $ym-current-hover-foreground: var(--primary), +// $ym-current-hover-background: var(--background), +// $ym-selected-current-foreground: var(--primary), +// $ym-selected-current-background: #EDF5FF, +// $ym-selected-background: #EDF5FF, +// $ym-selected-hover-foreground: var(--primary), +// $ym-selected-hover-background: #D9EAFF, +// $ym-current-outline-color: transparent, +// $ym-current-outline-hover-color: var(--primary), +// $ym-selected-outline-color: var(--primary), +// $ym-selected-hover-outline-color: var(--primary), +// $ym-selected-focus-outline-color: var(--primary), +// $ym-selected-current-outline-color: var(--primary), +// $ym-selected-current-outline-hover-color: var(--primary), +// $ym-selected-current-outline-focus-color: var(--primary), +// $date-selected-current-foreground: var(--primary), +// $date-selected-current-background: #FFF, +// $date-selected-current-hover-foreground: var(--primary), +// $date-selected-current-hover-background: var(--background-weekend), +// $date-selected-current-focus-foreground: var(--primary), +// $date-selected-current-focus-background: var(--background-weekend), +// $date-selected-foreground: var(--primary), +// $date-selected-background: #FFF, +// $date-selected-border-color: var(--primary), +// $date-selected-hover-foreground: var(--primary), +// $date-selected-hover-background: var(--background-weekend), +// $date-selected-hover-border-color: var(--primary), +// $date-selected-focus-foreground: var(--primary), +// $date-selected-focus-background: var(--background-weekend), +// $date-selected-focus-border-color: var(--primary), +// $date-current-border-color: var(--current-border), +// $date-current-hover-border-color: var(--current-border), +// $date-current-focus-border-color: var(--current-border), +// $date-selected-current-border-color: var(--current-border), +// $date-selected-current-hover-border-color: var(--current-border), +// $date-selected-current-focus-border-color: var(--current-border), +// $date-current-hover-background: var(--background-weekend), +// $border-radius: rem(8px) +// ); + +// :host { +// ::ng-deep { +// .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { +// @include css-vars($custom-calendar-theme-weekend); +// } +// } +// } + +// igx-calendar { +// @include css-vars($custom-calendar-theme); +// } diff --git a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss index 538514fc6b..bd4d37889b 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss @@ -1,12 +1,135 @@ @use "igniteui-angular/theming" as *; +:host { + ::ng-deep { + + // Note: This is not the standard approach for styling the component. + // We're using it here solely to mirror the UI5 sample. + + [title="Week"] .igx-days-view__label.igx-days-view__label--week-number { + opacity: 0; + } + + igx-icon { + --color: var(--primary); + --size: #{rem(20px)}; + } + + .igx-calendar-view__item-inner { + color: var(--primary) + } + + .igx-days-view__date--selected span { + font-weight: 700; + } + + .igx-days-view__date--current span { + border-width: rem(2px); + } + + .igx-days-view__date--weekend:not(.igx-days-view__date--inactive):not(.igx-days-view__date--selected) span:not(:hover) { + background: var(--background-weekend); + } + + .igx-days-view__date--active ::after { + border: rem(2px) solid #0032A5; + width: rem(20px); + height: rem(20px); + border-radius: rem(3px); + left: rem(3px); + } + + .igx-days-view__date--active.igx-days-view__date--current :after { + left: rem(2px); + } + + .igx-calendar-view__item:not(.igx-calendar-view__item--selected) .igx-calendar-view__item-inner:hover { + box-shadow: inset 0 0 0 rem(1px) #BCC3CA; + } + + .igx-calendar-view { + padding: 1rem rem(6px); + } + + .igx-calendar-picker__prev { + position: absolute; + } + + .igx-calendar-picker__next { + position: absolute; + right: 0; + } + + .igx-calendar-picker__nav { + position: relative; + left: 0; + bottom: rem(27px); + } + + .igx-calendar-picker__next:hover, + .igx-calendar-picker__prev:hover { + background-color: var(--background); + border-radius: rem(8px); + box-shadow: inset 0 0 0 rem(1px) #BCC3CA; + } + + .igx-calendar-picker__next, + .igx-calendar-picker__prev { + padding: rem(6px); + } + + .igx-calendar-picker { + display: unset; + } + + .igx-calendar-picker__dates { + justify-content: center; + position: relative; + top: rem(4px); + gap: 1rem; + height: 2rem; + + span:not(.igx-calendar__aria-off-screen) { + font-size: rem(14px); + padding: rem(4px) rem(10px); + + &:hover { + background-color: var(--background); + border-radius: rem(8px); + box-shadow: inset 0 0 0 rem(1px) #BCC3CA; + } + } + } + + .igx-calendar__pickers--days { + height: rem(24px); + } + + .igx-calendar-picker { + padding-inline: 1rem; + } + } +} + .calendar-wrapper { - max-width: 600px; - min-width: 200px; - margin: 8px; + max-width: rem(600px); + margin: rem(8px); } -.igx-calendar { - --ig-size: 2; - box-shadow: elevation(4); +igx-calendar { + --current-border: #A100C2; + --primary: #0064D9; + --background: #EAECEE; + --background-weekend: #E8E8E8; + --background-hover: #F5F6F8; + + width: rem(290px); + min-height: rem(282px); + box-sizing: border-box; + padding-top: rem(6px); + box-shadow: elevation(4); + --ig-font-family: Arial, sans-serif; + --ig-subtitle-1-font-weight: 600; + --ig-size: 1; + --ig-radius-factor: 0.4; } \ No newline at end of file